200520 New reply layout and Longhorn theme

This commit is contained in:
Daisuke 2020-05-20 14:53:33 -05:00
parent cb98b84c94
commit 2b1cee3f9d
27 changed files with 900 additions and 78 deletions

View File

@ -276,6 +276,24 @@ foreach($_GET as $key => $value){
case "userinfo":
$info = api_get("accounts/".htmlentities($value));
$rel = api_get("accounts/relationships?id=".htmlentities($value));
$photos = api_get("accounts/".htmlentities($value)."/statuses?only_media=true&limit=5&exclude_reblogs=true");
$photo = array();
$c = 0;
if (!empty($photos)){
foreach ($photos as $elem){
if ($elem['media_attachments'][0]['type'] == "image"){
$photo[$c]['url'] = $elem['media_attachments'][0]['url'];
if ($elem['sensitive'] == true){
$photo[$c]['s'] = true;
}
$c++;
}
if ($c == 3){
break;
}
}
}
echo "<div class='userinfo_he' style='background-color:#".averageColor($info['avatar'])."; background-size:cover;" . (!empty($info['header']) ? "background-image:url(".$info['header'].");" : "") . "'>
<span style='margin:5px; display:inline-block;'>
@ -291,6 +309,11 @@ foreach($_GET as $key => $value){
<span id='".$info['id']."' class='profileButton ".(in_array($info['id'],$user_settings['nsfw']) ? "unnsfw" : "nsfw" )."'>".(in_array($info['id'],$user_settings['nsfw']) ? "NSFW <span class='fontello'>&#xf205;</span>" : "NSFW <span class='fontello'>&#xf204;</span>" )."</span>
".($logedin ? "<span id='" . $info['id'] . "' class='profileButton " . ($rel[0]['muting'] ? "un" : "") . "mute'>" . ($rel[0]['muting'] ? "&#xe81a; Unmute" : "&#xe81b; Mute") . "</span>" : "")."
</span>
<div style='display:flex; width:280px'>";
foreach ($photo as $elem){
echo "<div style='overflow:hidden; display:block; height:90px; flex:1; background-image:url(\"".$elem['url']."\"); ".(isset($elem['s']) ? "filter: blur(5px);" : "")." background-size:cover; margin:2px;'></div>";
}
echo "</div>
</div>
";
die();
@ -367,3 +390,4 @@ if(isset($_POST['status'])){
die();
}

View File

@ -260,7 +260,14 @@ input[type="submit"] {
}
.post_footer {
background-color: #eee;
background-color: transparent;
}
.felem a:hover > span {
background-color:white;
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
color: black !important;
border-radius:4px;
}
.public::after {

View File

@ -55,6 +55,7 @@ input[type="file"], .nloadmore {
textarea {
resize: none;
font-size:12px !important;
}
/* omnipresent */
@ -110,6 +111,16 @@ textarea {
margin:0px !important;
text-align: left;
word-break: break-all;
font-size:12px !important;
}
.content * {
font-size:12px !important;
}
.content .emoji {
height:19px !important;
}
aside {
@ -288,7 +299,7 @@ aside {
}
.element {
width: 90% !important;
width: 100% !important;
clear: both;
display: inline-block;
margin-top: 3px;
@ -369,10 +380,18 @@ aside {
}
.felem {
margin-left: 7px;
margin-left: 16px;
float: left;
}
.felem a {
font-size:20px !important;
}
.felem a > span {
font-size:small;
}
.contact{
background-color:white;
cursor: pointer;
@ -403,7 +422,7 @@ aside {
float: left;
text-align: center;
position: relative;
border-radius: 3px;
border-radius: 0px;
}
.postform,.searchmobile {
@ -427,16 +446,8 @@ aside {
text-align: left;
}
.postHeader div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.postHeader *,.post_footer *{
font-size:small;
font-size:12px;
}
.previewpost {
@ -534,6 +545,10 @@ aside {
margin: 15px;
}
.postAge,.public:after,.unlisted:after,.private:after,.direct:after {
font-size:11px;
}
.post_footer {
width: 630px;
display: table-cell;
@ -544,8 +559,9 @@ aside {
border-radius: 3px;
}
.post_buttons {
font-family: fontello;
font-family: fontello, sans-serif;
float: right;
display: inline-block;
text-align: right;
@ -557,7 +573,7 @@ aside {
font-family: inherit;
text-decoration: none;
color: inherit;
font-size: inherit;
font-family: fontello, sans-serif;
}
.reply {
@ -565,6 +581,11 @@ aside {
clear: both;
text-align: left;
display: block;
border-bottom:1px dotted #aaa;
}
.replyflex {
flex: 6 !important;
}
.note {

View File

@ -345,6 +345,10 @@ aside {
padding:0px;
}
.reply .postMenu {
margin-right:15px !important;
}
.profileMenu:hover > div, .listmenu:hover > div{
display:block !important;
}
@ -363,6 +367,30 @@ aside {
float: left;
}
.felem a {
font-size:20px !important;
position:relative;
}
.notif .felem a {
font-size:13px !important;
}
.felem a > span {
display:none;
}
.felem a:hover > span {
display:block;
position:absolute;
width:30px;
height:27px;
top:-35px;
left:-5px;
text-align:center;
padding-top:3px;
}
.contact{
background-color:white;
cursor: pointer;
@ -526,8 +554,20 @@ aside {
border-radius: 3px;
}
.postAge,.public:after,.unlisted:after,.private:after,.direct:after {
font-size:12px;
}
.reply:hover .post_buttons,.reply:hover .postMenu {
display:block !important;
}
.replyflex {
flex:9;
}
.post_buttons {
font-family: fontello;
font-family: fontello, sans-serif;
float: right;
display: inline-block;
text-align: right;
@ -536,7 +576,7 @@ aside {
.post_buttons a,
.post_buttons span {
font-family: inherit;
font-family: fontello, sans-serif;
text-decoration: none;
color: inherit;
font-size: inherit;
@ -547,6 +587,7 @@ aside {
clear: both;
text-align: left;
display: block;
border-bottom:1px dotted #aaa;
}
.note {

View File

@ -43,7 +43,7 @@ function get_urls($input) {
shortcodes and the emoji url is defined in the same place */
function emojify($string, $emojis, $size = 40) {
foreach ($emojis as $emoji) {
$string = str_replace(":" . $emoji['shortcode'] . ":", "<img alt='" . $emoji['shortcode'] . "' title='" . $emoji['shortcode'] . "' src='" . $emoji['static_url'] . "' height=$size style='vertical-align: middle;'>", $string);
$string = str_replace(":" . $emoji['shortcode'] . ":", "<img class='emoji' alt='" . $emoji['shortcode'] . "' title='" . $emoji['shortcode'] . "' src='" . $emoji['static_url'] . "' height=$size style='vertical-align: middle;'>", $string);
}
return $string;
}
@ -321,8 +321,9 @@ function render_reply($item) {
$reply['id'] = $item['id'];
$reply['uid'] = $item['account']['id'];
$reply['name'] = emojify($item['account']['display_name'], $item['account']['emojis'], 15);
$reply['name'] = emojify($item['account']['display_name'], $item['account']['emojis'], 20);
$reply['acct'] = $item['account']['acct'];
$reply['handle'] = "@".explode("@",$item['account']['acct'])[0];
$reply['avatar'] = $item['account']['avatar'];
$reply['menu'] = "<ul>";
@ -357,24 +358,25 @@ function render_reply($item) {
$reply['replyto'] = ($item['in_reply_to_id'] ? " <a class='fontello link preview ldr' target='_blank' id='" . $item['in_reply_to_id'] . "' href='?thread=" . $item['in_reply_to_id'] . "'>&#xf112;</a> " : "");
$reply['text'] = processText($item);
$reply['date'] = "<a class='ldr postAge' id='".strtotime($item['created_at'])."' style='text-decoration:none;' target='_blank' href='?thread=" . $item['id'] . "'>" . time_elapsed_string($item['created_at']) . "</a> - <span class='fontello ".$item['visibility']."'> </span>";
$reply['date'] = "<a class='ldr postAge' id='".strtotime($item['created_at'])."' style='text-decoration:none;' target='_blank' href='?thread=" . $item['id'] . "'>" . time_elapsed_string($item['created_at']) . "</a>";
$reply['visibility'] = $item['visibility'];
$reply['media'] = "";
if (!empty($item['media_attachments'])) {
$reply['media'] = "<div style='width:170px; display:inline-block; float:left; margin-right:15px; '>";
$reply['media'] = "<div style='width:170px; display:inline-block; float:left; margin:15px 0px 10px 0px;'>";
$images = count($item['media_attachments']);
$class = ($images > 1 ? "class='icon'" : "");
foreach ($item['media_attachments'] as $file) {
$ext = explode(".", $file['url']);
$ext = end($ext);
$ext = explode("?", $ext) [0];
if ($ext == 'mp4' || $ext == 'webm') {
if (in_array($ext,array('webm','mp4','ogv'))) {
$reply['media'] .= "<div style='text-align:center; width:100%;'><video preload='metadata' width='100%' controls ".($user_settings['videoloop'] == "on" ? "loop" : "").">
<source src='" . $file['url'] . "' type='video/$ext'>
<source src='" . $file['url'] . "' type='video/".($ext == "ogv" ? "ogg" : $ext)."'>
</video></div>
";
}
elseif ($ext == 'mp3' || $ext == 'ogg') {
elseif (in_array($ext,array('mp3','ogg','oga','opus'))) {
$reply['media'] .= "<div style='text-align:center; width:100%;'><audio controls>
<source src='" . $file['url'] . "' type='audio/$ext'>
Your browser does not support the audio tag.
@ -814,28 +816,36 @@ function timeline($query) {
global $srv;
$notes = "";
$media = ($query['text'] == "on" ? "" : "&only_media=true");
$next = ($query['next'] ? "&max_id=" . $query['next'] : ($query['since'] ? "&since_id=" . $query['since'] : ""));
$hq = array();
$hq['limit'] = 30;
$hq['only_media'] = ($query['text'] == "off" ? 'true' : 'false');
if ($query['next']){
$hq['max_id'] = $query['next'];
$next = $query['next'];
} elseif ($query['since']) {
$hq['since_id'] = $query['since'];
}
switch ($query['mode']) {
case "home":
$array = api_get("timelines/home?limit=30{$media}{$next}");
$array = api_get("timelines/home?".http_build_query($hq));
break;
case "federated":
$array = api_get("timelines/public?limit=30{$media}{$next}");
$array = api_get("timelines/public?".http_build_query($hq));
break;
case "tag":
$array = api_get("timelines/tag/" . $query['tag'] . "?limit=30{$media}{$next}");
$array = api_get("timelines/tag/" . $query['tag'] . "?".http_build_query($hq));
break;
case "local":
$array = api_get("timelines/public?limit=30&local=true{$media}{$next}");
$array = api_get("timelines/public?local=true&".http_build_query($hq));
break;
case "user":
$array = api_get("accounts/" . $query['user'] . "/statuses?limit=30{$media}{$next}");
$array = api_get("accounts/" . $query['user'] . "/statuses?".http_build_query($hq));
break;
case "thread":
@ -845,19 +855,19 @@ function timeline($query) {
break;
case "favourites":
$array = api_get("favourites?limit=30{$media}{$next}");
$array = api_get("favourites?".http_build_query($hq));
break;
case "direct":
$array = api_get("timelines/direct?limit=30{$next}");
$array = api_get("timelines/direct?".http_build_query($hq));
break;
case "list":
$array = api_get("timelines/list/" . $query['list'] . "?limit=30{$next}");
$array = api_get("timelines/list/" . $query['list'] . "?".http_build_query($hq));
break;
case "bookmarks":
$array = api_get("bookmarks?limit=30{$next}");
$array = api_get("bookmarks?".http_build_query($hq));
break;
case "search":
@ -866,11 +876,11 @@ function timeline($query) {
case "account":
$info = api_get("accounts/verify_credentials");
$array = api_get("accounts/" . $info['id'] . "/statuses?limit=30{$media}{$next}");
$array = api_get("accounts/" . $info['id'] . "/statuses?".http_build_query($hq));
break;
default:
$array = api_get("timelines/public?limit=30{$media}{$next}");
$array = api_get("timelines/public?".http_build_query($hq));
break;
}
@ -1059,4 +1069,4 @@ function getHeaders($respHeaders) {
}
return $headerText;
}
}

View File

@ -121,6 +121,70 @@ $('body').on('click', '.replies', function(e) {
});
});
$.fn.isOnScreen = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
/*
$('body').on('click', '.postbody:not(a)', function(e) {
e.preventDefault;
$(".reply").remove();
$(".element").removeClass("element_pad");
$(this).closest(".element").addClass("element_pad");
//$('.replies_container').html('');
var id = $(this).closest(".post").attr('id');
if($('#' + id+'.replies_container').find('.reply').length < 1){
$('#' + id+'.replies_container').html("<p><img src='img/loading.gif'></p>");
}
$.get("action.php?a=true&replies=" + id, function(data) {
$('#' + id+'.replies_container').html(data);
$('#' + id+'.replies_container').delay(800).fadeIn(400);
$('#a' + id).html('');
$('#' + id+".replies_container .ancestor").appendTo('#a' + id);
});
});
*/
/*
$('body').on('click', '.postbody:not(a)', function(e) {
e.preventDefault;
$(".reply").remove();
$(".element").removeClass("element_pad");
$(this).closest(".element").addClass("element_pad");
var id = $(this).closest(".post").attr('id');
var offset = $('#'+id+' .postHeader').offset().top + 200;
if($('#' + id+'.replies_container').find('.reply').length < 1){
$('#' + id+'.replies_container').html("<p><img src='img/loading.gif'></p>");
}
$.get("action.php?a=true&replies=" + id, function(data) {
$('#' + id+'.replies_container').html(data);
$('#' + id+'.replies_container').delay(800).fadeIn(400);
$('#a' + id).html('');
$.when($('#' + id+".replies_container .ancestor").appendTo('#a' + id)).then(function() {
if ($('#'+id+'.post_buttons').isOnScreen() == false) {
$('html, body').animate({
scrollTop: offset
}, 1000);
}
});
});
});
*/
$('body').on('click', '.ldr:not(.tlicon)', function(e) {
$('.tlicon').each(function(a){
$( this ).removeClass('tiselected')
@ -497,4 +561,4 @@ function timeSince(date) {
return " just now";
}
return Math.floor(seconds) + " seconds";
}
}

View File

@ -46,17 +46,23 @@ $query = http_build_query(array_filter(array(
$('body').on('click', '.replyform', function(e) {
e.preventDefault;
$("#replyform").remove();
$(".element").removeClass("element_pad");
$(this).closest(".element").addClass("element_pad");
var id = $(this).parents().eq(1).attr('id');
var type = $(this).parents().eq(3).attr('class').trim().replace(" ",".");
var type = $(this).parents().eq(3).attr('mode').trim().replace(" ",".");
console.log(type);
$('#replyform').remove();
var data = JSON.parse(document.getElementById('data-' + id).innerHTML);
$.get("action.php?a=true&themefile=templates/replyform.txt", function(result) {
result = result.replace(":content:", data.mentions)
result = result.replace(":id:", data.id)
$('.'+type).find('#' + id+'.replies_container').prepend(result);
if(type == 'post'){
$('.'+type).find('#' + id+'.replies_container').prepend(result);
} else {
$('#' + id+'.'+type).after(result);
}
$('#replyform #' + data.scope).prop('selected', true);
$('#' + id).fadeIn(400);
});

View File

@ -89,7 +89,6 @@ $thread = timeline(array_merge($tl, $user_settings));
$profile['bottom'] = "";
}
/* some values are processed from the profile and stored in the $profile array*/
$profile['avatar'] = $info['avatar'];
$profile['name'] = emojify($info['display_name'], $info['emojis'], 40);
@ -139,13 +138,20 @@ if ((!isset($thread[0]['id']) && !empty($thread)) || !is_array($thread)) {
continue;
}
$post['name'] = "<span style='position:relative;'><b><span id='" . $elem['reblog']['account']['id'] . "' class='user'><a class='link ldr desktop' href='?user=" . $elem['reblog']['account']['id'] . "'>" . emojify($elem['reblog']['account']['display_name'], $elem['reblog']['account']['emojis'], 20) . "</a><a class='link ldr mobile' style='font-size:12px;' href='?user=" . $elem['reblog']['account']['id'] . "'>@" . explode("@",$elem['reblog']['account']['acct'])[0] . "</a></span></span></b><span class='desktop' style='font-size:12px; opacity:0.8;'> (" . $elem['reblog']['account']['acct'] . ")</span>";
$post['name'] = emojify($elem['reblog']['account']['display_name'], $elem['reblog']['account']['emojis'], 20);
$post['uid'] = $elem['reblog']['account']['id'];
$post['acct'] = '';//$elem['reblog']['account']['acct'];
$post['handle'] = explode("@",$elem['reblog']['account']['acct'])[0];
$post['replyto'] = "<span>" . ($elem['reblog']['in_reply_to_id'] ? " <a class='fontello link preview ldr' target='_blank' id='" . $elem['reblog']['in_reply_to_id'] . "' href='?thread=" . $elem['reblog']['in_reply_to_id'] . "'>&#xf112;</a>" : "") . "</span>";
$post['rt'] = "<span>[ <span style='font-family:fontello'> &#xe826; </span> <img src='" . $elem['account']['avatar'] . "' width=20 style='vertical-align:middle; border-radius:5px;'> <a class='link ldr user' style='font-size:12px;' id='" . $elem['account']['id'] . "' href='?user=" . $elem['account']['id'] . "'><span class='desktop'>" . emojify($elem['account']['display_name'], $elem['account']['emojis'], 15) . "</span><span class='mobile'>@" . explode("@", $elem['account']['acct']) [0] . "</span></a> ]</span>";
$post['rt'] = "<div style='display:inline-block; font-family:fontello, sans-serif; vertical-align:top;'>[ &#xe826; <img src='" . $elem['account']['avatar'] . "' width=20 style='border-radius:5px; vertical-align:middle;'> <span class='user' id='" . $elem['account']['id'] . "'><a class='link ldr' style='font-size:12px;' id='" . $elem['account']['id'] . "' href='?user=" . $elem['account']['id'] . "'><span>@" . explode("@", $elem['account']['acct']) [0] . "</a></span> ]</div>";
$elem = $elem['reblog'];
}
else {
$post['name'] = "<span style='position:relative;'><b><span id='" . $elem['account']['id'] . "' class='user'><a class='link ldr desktop' href='?user=" . $elem['account']['id'] . "'>" . emojify($elem['account']['display_name'], $elem['account']['emojis'], 20) . "</a><a class='link ldr mobile' style='font-size:12px;' href='?user=" . $elem['account']['id'] . "'>@" . explode("@",$elem['account']['acct'])[0] . "</a></span></span></b><span class='desktop' style='font-size:12px; opacity:0.8;'> (" . $elem['account']['acct'] . ")</span>";
$post['name'] = emojify($elem['account']['display_name'], $elem['account']['emojis'], 20);
$post['uid'] = $elem['account']['id'];
$post['acct'] = "(@".$elem['account']['acct'].")";
$post['handle'] = explode("@",$elem['account']['acct'])[0];
$post['replyto'] = "<span>" . ($elem['in_reply_to_id'] ? " <a class='fontello link preview ldr' target='_blank' id='" . $elem['in_reply_to_id'] . "' href='?thread=" . $elem['in_reply_to_id'] . "'>&#xf112;</a>" : "") . "</span>";
}

View File

@ -1,18 +1,30 @@
<div class='element'>
<div class='avatar desktop' style='background-image:url(:avatar:) :style:'></div>
<div class='post' id=':id:' pid=':pid:'>
<div class='post' id=':id:' pid=':pid:' mode="post">
<div id='a:id:' class='ancestors'>:ancestors:</div>
<div class='postHeader'>
<div style='width:82%; margin:5px; margin-left:10px; display:block; float:left; line-height:30px;'><img src=':avatar:' width=25 class='mobile' style='vertical-align:middle; border-radius:10px'> :name: :rt: </div>
<div style='width:80%; margin:5px; margin-left:10px; display:block; float:left; line-height:30px;'>
<img src=':avatar:' width=25 class='mobile' style='border-radius:10px; display:inline-block;'>
<div style='max-width:50%; display:inline-block;' class='user' id=':uid:'>
<div style='white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'>
<a class='link ldr' href='?user=:uid:' style='font-weight:bold;'>
<span class='desktop'>:name:</span>
<span class='mobile'>:handle:</span>
</a>
</div>
</div>
<span class='desktop' style='vertical-align:top; font-size:12px;'>:acct:</span>
:rt:
</div>
<span style="margin-top:12px; margin-right:10px; float:right; display:block;">
<span class='postMenu fontello'>&#xf0c9;<div style='display:none; z-index:99; width:130px; position: absolute; top: 15px; right: -1px;' class='menu'>:menu:</div></span>
</span>
</div>
:spoiler:
<div class='media' style='text-align:center;'>:media:</div>
<div class='postbody'><div class='content' style='margin-bottom:5px;'>
<div class='postbody'><span class='content' style='margin-bottom:5px;'>
:replyto: :text:
</div></div>
</span></div>
<div class='post_footer'>:footer:</DIV>
<div class='post_notes'>:notes:</DIV>
<div id=':id:' class='replies_container'><noscript>:form:</noscript>:descendants:</div>

View File

@ -1,25 +1,19 @@
<div class='reply :mode:' id=':id:'>
<div class='postHeader'>
<div style='margin:4px; display:block; float:left;'>
<img src=':avatar:' width=30 style='vertical-align:middle; border-radius:30px;'>
<a class='ldr link user' href='?user=:uid:' id=':uid:'>
<b>:name:</b>
</a>
<span class='desktop'>(:acct:)</span>
<div class='reply :mode:' id=':id:' style='display:inline-block; position:relative;'>
<div style='display:flex;' mode="reply">
<div style='flex:1; text-align:center; padding-bottom:8px; padding-top:8px;'>
<img src=':avatar:' style='vertical-align:middle; border-radius:30px; width:80%'>
</div>
<span style='margin:12px; float:right; display:block;'>
<span class='postMenu fontello'>&#xf0c9;
<div style='display:none; z-index:99; width:130px; position: absolute; top: 15px; right: -1px;' class='menu'>:menu:</div>
<div style='padding:5px 8px 8px 0px;' class='replyflex'>
<span id=':uid:' class='user desktop'><b><a class='link ldr' href='?user=:uid:'>:name:</a></b></span> <span id=':uid:' class='user mobile'><b><a class='link ldr' href='?user=:uid:' style='font-size:10px;'>:handle:</a></b></span> <span >:date:</span><br>
<br> <span class='content' style='width:100%;'>:replyto: :text:</span><br>
:media:
<br>
<span id=':id:' class="post_buttons mobile" style='position:absolute; right:10px; bottom:5px;'>:buttons:</span>
<span class=':visibility: fontello' style='position:absolute; right:10px; top:5px;'></span>
<span class='postMenu fontello mobile' style='position:absolute; right:15px; top:5px;'>&#xf0c9;
<div style='display:none; z-index:99; width:130px; position: absolute; top: 10px; right: -1px;' class='menu'>:menu:</div>
</span>
</span>
</div>
</div>
<div class='postbody'>
<div class='content' style='margin:0px;'>:media: :replyto: :text:</div>
</div>
<span style='width:100%; margin-bottom:10px; display:block;'>
<span style='margin-left:10px;'>:date:</span>
<span id=':id:' class="post_buttons" style='margin-right:10px;'>:buttons:</span>
</span>
<div id=':id:' class='replies_container'></div>
<script type='application/json' id='data-:id:'>:json:</script>
</div>

View File

@ -1,9 +1,21 @@
<div class='element'>
<div class='avatar desktop' style='background-image:url(:avatar:) :style:'></div>
<div class='post' id=':id:' pid=':pid:'>
<div class='post' id=':id:' pid=':pid:' mode="post">
<div id='a:id:' class='ancestors'>:ancestors:</div>
<div class='postHeader'>
<div style='width:82%; margin:5px; margin-left:10px; display:block; float:left; line-height:30px;'><img src=':avatar:' width=25 class='mobile' style='vertical-align:middle; border-radius:10px'> :name: :rt: </div>
<div style='width:80%; margin:5px; margin-left:10px; display:block; float:left; line-height:30px;'>
<img src=':avatar:' width=25 class='mobile' style='border-radius:10px; display:inline-block;'>
<div style='max-width:50%; display:inline-block;' class='user' id=':uid:'>
<div style='white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'>
<a class='link ldr' href='?user=:uid:' style='font-weight:bold;'>
<span class='desktop'>:name:</span>
<span class='mobile'>:handle:</span>
</a>
</div>
</div>
<span class='desktop' style='vertical-align:top; font-size:12px;'>:acct:</span>
:rt:
</div>
<span style="margin-top:12px; margin-right:10px; float:right; display:block;">
<span class='postMenu fontello'>&#xf0c9;<div style='display:none; z-index:99; width:130px; position: absolute; top: 15px; right: -1px;' class='menu'>:menu:</div></span>
</span>

View File

@ -159,6 +159,14 @@ input[type="checkbox"]:checked+label {
padding:2px;
}
.reply .postMenu {
background-color: transparent;
border: none;
color:black;
padding:2px;
margin-right:10px;
}
.profile,.loader,.menu,.notif,.postMenu > .menu {
background-color: #efd7f3 !important;
border: 2px outset #f2e0f5 !important;
@ -265,6 +273,7 @@ input[type="checkbox"]:checked+label {
.loadmore, .postform,.searchmobile {
background-color: #efd7f3;
border: 2px outset #f2e0f5 !important;
border-radius:0px !important;
}
.previewpost,.userinfo {
@ -330,6 +339,14 @@ input[type="checkbox"]:checked+label {
background-color:#c8f7f5;
}
.felem a:hover > span {
background-color: #efd7f3;
border: 2px outset #f2e0f5 !important;
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
color: black !important;
border-radius:0px;
}
.public::after {
content: '';
}

View File

@ -278,6 +278,13 @@ input[type="submit"] {
background-color: #eee;
}
.felem a:hover > span {
background-color:white;
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
color: black !important;
border-radius:4px;
}
.public::after {
content: '';
}

View File

@ -262,6 +262,13 @@ input[type="submit"] {
border-top:2px solid #dedfe1;
}
.felem a:hover > span {
background-color:white;
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
color: black !important;
border-radius:4px;
}
.public::after {
content: '';
}

View File

@ -170,6 +170,15 @@ input[type="submit"] {
padding:2px;
}
.reply .postMenu {
background-color: transparent;
border: none !important;
color:black;
padding:2px;
margin-right:20px !important;
color:transparent;
}
.menu div{
background-color: #b8b8b8;
border: 2px outset #fff !important;
@ -331,6 +340,16 @@ input[type="submit"] {
border: 2px inset #fff !important;
}
.felem a:hover > span {
background-color: #b8b8b8;
border-left: 1px solid #e4e6f3 !important;
border-top: 1px solid #e4e6f3 !important;
border-right: 1px solid #000507 !important;
border-bottom: 1px solid #000507 !important;
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
color: black !important;
}
.public{
display:inline-block;
width:17px;

View File

@ -251,6 +251,14 @@ input[type="submit"] {
border-top:2px solid #eeaa88;
}
.felem a:hover > span {
background-color: #f0e0d6;
border:1px solid #800000;
color: #4267b2;
}
.public::after {
content: '';
}

View File

@ -300,6 +300,13 @@ input[type="submit"] {
border-radius: 0px 0px <?php echo $theme['br']; ?>px <?php echo $theme['br']; ?>px;
}
.felem a:hover > span {
color: <?php echo $backgroundLighter; ?>;
background-color: <?php echo $backgroundDarker ?> !important;
border: <?php echo $theme['bw']; ?>px solid #<?php echo $theme['bc']; ?>;
border-radius:3px;
}
.public::after {
content: '';
}

BIN
themes/longhorn/bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -0,0 +1,492 @@
a, .link {
color: blue;
}
body {
background-color: #3975b4;
background-image: url("../bg.jpg");
}
select{
color:black;
background-color:white;
}
label {
color: #425f99;
}
textarea,input[type="text"]{
background-color:white;
border: 2px solid #666 !important;
box-shadow: 0px 0px 3px rgba(255,255,255,1);
}
input[type="radio"]:checked+label {
color: black;
}
input[type="checkbox"]:checked+label {
color: red;
}
.topbar {
background-color: rgba(0,0,0,0.7);
background-image: linear-gradient(to bottom, rgba(150,150,150,0.55) 0%, rgba(160,160,160,0.55) 47%, rgba(56,55,55,0.45) 47%, rgba(56,55,55,0.45) 100%);
box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
color: white;
}
.gotop {
background-color: rgba(255, 255, 255, 0.5);
}
.gotop a {
color: white;
}
.topicon, .appname > a {
color: white !important;
}
.tiselected {
border-bottom: 2px solid white;
}
.search {
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) inset;
}
.search input[type="text"],.search input[type="submit"]{
border:0px !important;
background-image:none;
background-color:transparent !important;
box-shadow: none;
color: #000;
}
.badge {
color: white;
}
.alert {
background-color: red;
}
.notif,.postAge{
color:black;
}
.notif .text{
color:black !important;
}
.uname {
text-decoration:underline !important;
}
.side_element,.userinfo,.previewpost,#notifications,#hiddenside .notif {
background-color: rgba(0,0,0,0.86);
/*border: 1px solid #ababab !important;*/
border-radius:0px !important;
border: 1px solid #eee !important;
}
.side_element li:active {
background-color: rgba(255, 255, 255, 0.25);
}
.side_element a, .userinfo a, .userinfo .ldr, .previewpost a {
color: white !important;
text-shadow: 1px 1px 2px black;
}
.uploadBox {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.delpic {
color:red;
background-color:white;
}
input[type="submit"] {
color: white;
border-radius: 4px !important;
border: 1px solid #3a2528;
text-align: center;
white-space: nowrap;
background: white;
background: linear-gradient(to bottom, rgba(203,196,194,1) 0%, rgba(148,148,148,1) 1%, rgba(120,129,133,1) 48%, rgba(92,112,127,1) 49%, rgba(17,60,78,1) 50%, rgba(64,110,148,1) 78%, rgba(124,149,185,1) 100%);
box-shadow: 0px 1px 2px rgba #8d8588 inset;
}
/*
button,.postform input[type="submit"],.reply input[type="submit"] {
background: linear-gradient(to bottom, rgba(242,242,242,1) 0%, rgba(248,248,248,1) 47%, rgba(238,238,238,1) 47%, rgba(207,207,207,1) 100%);
color: black;
padding: 5px $half-height 3px;
border-radius: 30px !important;
border: 1px solid #ccc !important;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}*/
.formbtn {
color:white;
}
.formbtn label{
color:white;
}
#usermenu .menu {
background-color: #6B91B6;
}
.postMenu {
background: rgb(255,255,255);
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%, rgba(243,226,225,1) 1%, rgba(220,164,160,1) 17%, rgba(208,129,121,1) 37%, rgba(189,67,51,1) 38%, rgba(197,124,106,1) 99%, rgba(255,255,255,1) 100%);
/* box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 10px; /* FF 3.5+ */
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3) inset;
border-radius:0px 0px 6px 6px !important;
border:1px solid #444;
color:white;
text-shadow:0px 0px 3px black;
border-top:1px solid #ccc;
display:block;
}
.postMenu:hover {
background: rgb(255,255,255);
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%, rgba(208,137,127,1) 1%, rgba(208,137,127,1) 17%, rgba(213,85,63,1) 37%, rgba(213,45,16,1) 38%, rgba(253,137,60,1) 99%, rgba(252,203,80,1) 100%);
}
.postMenu > .menu,.menu {
background-color: rgba(0,0,0,0.8) !important;
border-radius:5px !important;
background-image:none !important;
border: 1px solid #ccc !important;
color:white;
box-shadow: 2px 2px 5px rgba(0,0,0,0.9);
text-shadow:0px 0px 3px white;
}
.menu div{
color:white;
text-shadow:0px 0px 3px white;
box-shadow: 1px 1px 2px black;
}
.menu li{
color:white;
text-shadow:0px 0px 3px white;
}
.menu li:hover,.side_element li:hover {
background-color: #157efb !important;
background-image: linear-gradient(#5c83f9 ,#157efb);
color:white;
text-shadow:0px 0px 3px white;
}
.menu li a{
color:white;
/*text-shadow:0px 0px 3px white;*/
font-family: fontello, verdana, sans-serif !important;
text-align:left;
}
.menu li:hover a{
color:white !important;
}
.listmenu li {
background-color:black;
color:white;
}
.listmenu li:hover {
background-color:white;
color:white;
}
.autl:hover li{
background-color:lightgreen !important;
}
.rutl:hover li{
background-color:crimson !important;
}
.unblock,.unmute,.block,.mute,.follow,
.unfollow,
.nsfw,
.unnsfw,
.profileMenu,
.listmenu {
background-color: black;
color: white;
cursor: pointer;
}
.mute:hover,.block:hover,.follow:hover,
.nsfw:hover {
background-color: lime;
}
.unmute:hover,.unblock:hover,.unfollow:hover,
.unnsfw:hover{
background-color: crimson !important;
}
.unbookmark{
color: crimson !important;
}
.unfav, .unreblog{
color: red !important;
}
.loadingImage{
background-image: url("../loadingb.gif") !important;
}
.loader{
color:white !important;
text-shadow: 0px 0px 3px white;
}
.loader a,.loadmore a{
color:white !important;
text-shadow: 0px 0px 3px white;
}
.profile,.loader,.menu,.post,
.rb,
.textonly,
.loadmore,
.postform,
.searchmobile {
background-color:rgba(150,150,180,0.5);
background-image: linear-gradient(to bottom right, rgba(255,255,255,0.3) 1%, rgba(0,0,0,0) 36%, rgba(0,0,0,0) 60%, rgba(255,255,255,0.3) 99%);
border: 1px solid #fff !important;
border-radius:4px !important;
box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
#notifications .notif{
color:white;
border:0px !important;
border-radius:0px !important;
}
.notif *{
color:white;
}
.postbody{
background-color:white;
border: 2px solid #666 !important;
box-shadow: 0px 0px 3px rgba(255,255,255,1);
border-radius:2px;
padding-top:10px;
padding-bottom:10px;
margin:4px 4px 0px 4px !important;
}
/*
.previewpost,.userinfo {
background-color: #e6e6e6;
background-image: none !important;
border: 1px solid #ababab !important;
border-radius:10px !important;
box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
color:black;
}
*/
.userinfo_he a{
color:white !important;
}
.icon {
background-color: black;
}
.postHeader {
text-shadow: rgba(255, 255, 255, 1) 0px 0px 2px;
}
.postHeader * {
color: white;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.toggleblur{
background: rgb(245,245,245);
background: linear-gradient(rgba(245,245,245,1) 0%, rgba(223,223,223,1) 60%, rgba(207,207,207,1) 61%, rgba(207,207,207,1) 63%, rgba(207,207,207,1) 66%, rgba(207,207,207,1) 66%, rgba(245,245,245,1) 100%);
color:black;
}
.polloption{
display:block;
margin:5px;
padding:5px;
background-color:white;
border: 1px solid #999999 !important;
border-radius:8px;
box-shadow: 1px 1px 2px inset rgba(0,0,0,0.3);
color:black;
}
.polloption:hover:not(.fixed),.voted{
cursor: pointer;
display:block;
margin:5px;
padding:5px;
background: rgb(185,215,245);
background: linear-gradient(rgba(108,124,154,1) 0%, rgba(135,160,200,1) 2%, rgba(151,180,224,1) 6%, rgba(162,193,240,1) 7%, rgba(139,180,236,1) 20%, rgba(95,168,224,1) 49%, rgba(135,202,240,1) 75%, rgba(182,227,255,1) 100%);
box-shadow: 0px 1px 2px black;
color:white;
}
.voteBar{
background: rgb(185,215,245);
background: linear-gradient(rgba(108,124,154,1) 0%, rgba(135,160,200,1) 2%, rgba(151,180,224,1) 6%, rgba(162,193,240,1) 7%, rgba(139,180,236,1) 20%, rgba(95,168,224,1) 49%, rgba(135,202,240,1) 75%, rgba(182,227,255,1) 100%);
box-shadow: 0px 1px 2px black;
}
.post_footer > a{
color: white;
}
.public::after {
content: '';
}
.unlisted::after {
content: '';
}
.private::after {
content: '';
}
.direct::after {
content: '';
}
.post .post_buttons a{
color:white;
}
.felem a:hover > span {
background-color:rgba(0,0,0,0.8);
border: 1px solid white;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.notif .post_buttons {
background-color:white;
border: 1px solid #999999 !important;
border-radius:8px;
box-shadow: 1px 1px 2px inset rgba(0,0,0,0.3);
}
.notif .post_buttons a,.reply .post_buttons a{
color:black !important;
}
.reply .formbtn {
color:black;
}
.reply .formbtn label{
color:black;
}
.reply .postHeader {
background-color: #f1f1f1;
background-image: linear-gradient(#f5f5f5 ,#e6e6e6);
border-bottom:1px outset #ccc;
}
.reply .postMenu {
color:black;
background-image: none;
background-color: transparent;
border:0px;
box-shadow:none;
}
.reply > .postMenu a{
color:white !important;
font-weight:normal !important;
}
.reply .postMenu {
margin-top: 0px !important;
padding:0px !important;
}
.reply > .postMenu a {
font-weight: normal !important;
}
.reply > .postbody {
background-color:transparent;
border: none !important;
padding:0px !important
margin:0px !important;
}
.reply a {
color:black;
font-weight:bold;
text-shadow: none;
}
.reply {
background-color:#cddef0;
border-bottom: 1px dotted #333 !important;
color:black;
}
.note {
background-color: #ccc;
}
.button {
background-color: white;
}
.setting label {
background-color:white;
border: 1px inset #fff !important;
color:#aaaaaa;
}
.setting input[type="radio"]:checked+label {
background: white;
background: linear-gradient(to bottom, rgba(108,124,154,1) 0%, rgba(135,160,200,1) 2%, rgba(151,180,224,1) 6%, rgba(162,193,240,1) 7%, rgba(139,180,236,1) 20%, rgba(95,168,224,1) 49%, rgba(135,202,240,1) 75%, rgba(182,227,255,1) 100%);
border: 0px !important;
color:white;
}

View File

@ -0,0 +1,16 @@
body {
margin: 0;
background-attachment: fixed;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center top;
}
.content {
width:90% !important;
}
.postMenu {
padding:3px 5px 3px 5px;
margin-top:-11px !important;
}

View File

@ -0,0 +1,10 @@
body {
background-attachment: fixed;
background-size: cover;
margin: 0;
}
.postMenu {
padding:3px 15px 3px 15px;
margin-top:-11px !important;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -96,6 +96,13 @@ input[type="checkbox"]:checked+label {
box-shadow: 0px 0px 7px #000;
}
.felem a:hover > span {
background-color: rgba(18,26,36,0.8);
color: #d8a070 !important;
border: 1px solid #d8a070;
border-radius:4px;
}
.public::after {
content: '';
}

View File

@ -222,6 +222,15 @@ textarea,input[type="text"]{
border-top:2px solid #2f2f2f;
}
.felem a:hover > span {
background-color: #2f2f2f;
color: #ff8706 !important;
border-radius:4px;
border: 1px dotted #ff8706;
}
.public::after {
content: '';
}

View File

@ -127,8 +127,8 @@ input[type="checkbox"]:checked+label {
input[type="submit"] {
color: #fff;
border-radius: 5px !important;
border: 2px solid;
border-radius: 20px !important;
border: 1px solid;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
white-space: nowrap;
@ -151,8 +151,8 @@ button,.postform input[type="submit"],.reply input[type="submit"] {
color: #fff;
padding: 5px $half-height 3px;
border-radius: 12px !important;
border: 2px solid #ccc !important;
border-radius: 30px !important;
border: 1px solid #ccc !important;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
@ -184,6 +184,14 @@ button,.postform input[type="submit"],.reply input[type="submit"] {
background-color: #6B91B6;
}
.reply .postMenu {
color:black;
background-image: none;
background-color: transparent;
border:0px;
box-shadow:none;
}
.postMenu {
background: rgb(185,215,245);
background: linear-gradient(rgba(185,215,245,1) 0%, rgba(152,197,243,1) 28%, rgba(129,186,242,1) 52%, rgba(81,172,242,1) 59%, rgba(171,220,246,1) 100%);
@ -374,6 +382,14 @@ button,.postform input[type="submit"],.reply input[type="submit"] {
color: black !important;
}
.felem a:hover > span {
background-color: #e6e6e6;
border: 1px solid #ababab !important;
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
color: black !important;
border-radius:4px;
}
.public::after {
content: '';
}

View File

@ -2,5 +2,4 @@ body {
background-attachment: fixed;
background-size: cover;
margin: 0;
}
}

View File

@ -367,6 +367,17 @@ input[type="submit"] {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2) inset;
}
.felem a:hover > span {
color: black !important;
background-color: #fbffbf !important;
border: 1px solid black;
box-shadow: 1px 1px 2px black;
border-radius:10px !important;
}
.public::after {
content: '';
}