130520 User search and wetcat theme

This commit is contained in:
Daisuke 2020-05-13 15:26:38 -05:00
parent 1f2b2fd19c
commit 125b944385
21 changed files with 689 additions and 123 deletions

View File

@ -276,12 +276,8 @@ foreach($_GET as $key => $value){
case "userinfo": case "userinfo":
$info = api_get("accounts/".htmlentities($value)); $info = api_get("accounts/".htmlentities($value));
$rel = api_get("accounts/relationships?id=".htmlentities($value)); $rel = api_get("accounts/relationships?id=".htmlentities($value));
$image=imagecreatefromstring(file_get_contents($info['avatar']));
$thumb=imagecreatetruecolor(1,1);
imagecopyresampled($thumb,$image,0,0,0,0,1,1,imagesx($image),imagesy($image));
$mainColor=strtoupper(dechex(imagecolorat($thumb,0,0)));
echo "<div class='userinfo_he' style='background-color:#$mainColor; background-size:cover; background-image:url(" . $info['header_static'] . ");'> 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;'> <span style='margin:5px; display:inline-block;'>
<a href='".$info['url']."' target='_blank' class='external' style='font-weight:bold; font-size:13px; text-decoration:none; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;'>".$info['acct']."</a> <a href='".$info['url']."' target='_blank' class='external' style='font-weight:bold; font-size:13px; text-decoration:none; color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;'>".$info['acct']."</a>
</span> </span>
@ -326,9 +322,13 @@ foreach($_GET as $key => $value){
case "emoji": case "emoji":
echo emoji_list(sanitize($value)); echo emoji_list(sanitize($value));
//die(); break;
case "contact":
echo contact_search(sanitize($value));
break; break;
} }
} }

View File

@ -34,6 +34,10 @@ select{
font-weight:bold; font-weight:bold;
font-family:fontello, sans-serif; font-family:fontello, sans-serif;
} }
.postform select,.reply select{
width: 45px;
}
option{ option{
font-family:fontello, sans-serif; font-family:fontello, sans-serif;
@ -263,7 +267,7 @@ aside {
font-weight:bold; font-weight:bold;
margin-top:5px; margin-top:5px;
} }
.formbtn { .formbtn {
background-color:transparent; background-color:transparent;
border: 0px; border: 0px;
@ -307,7 +311,6 @@ aside {
#usermenu .menu { #usermenu .menu {
display: none; display: none;
width: 150px; width: 150px;
height: 100px;
position: absolute; position: absolute;
top: -322px; top: -322px;
left: -80px; left: -80px;
@ -366,10 +369,21 @@ aside {
} }
.felem { .felem {
margin-left: 10px; margin-left: 7px;
float: left; float: left;
} }
.contact{
background-color:white;
cursor: pointer;
border-top:1px dotted #aaa;
}
.contact:hover{
background-color:#0000a0;
color:white;
}
.avatar { .avatar {
width: 80px; width: 80px;
background-size: 80px; background-size: 80px;
@ -413,6 +427,14 @@ aside {
text-align: left; text-align: left;
} }
.postHeader div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.postHeader *,.post_footer *{ .postHeader *,.post_footer *{
font-size:small; font-size:small;
} }
@ -468,9 +490,9 @@ aside {
} }
.blur { .blur {
-webkit-filter: blur(25px) brightness(70%) grayscale(100%); -webkit-filter: blur(25px) brightness(70%) grayscale(80%);
/* Safari 6.0 - 9.0 */ /* Safari 6.0 - 9.0 */
filter: blur(25px) brightness(70%) grayscale(100%); filter: blur(25px) brightness(70%) grayscale(80%);
opacity: 0.5; opacity: 0.5;
transition: 0.4s; transition: 0.4s;
} }
@ -483,8 +505,8 @@ aside {
.small { .small {
width: 48% !important; width: 48% !important;
height: 321px; height: 221px;
line-height: 321px; line-height: 221px;
background-color: black; background-color: black;
float:left; float:left;
margin:2px !important; margin:2px !important;
@ -492,8 +514,8 @@ aside {
.smaller { .smaller {
width: 31% !important; width: 31% !important;
height: 212px; height: 112px;
line-height: 212px; line-height: 112px;
background-color: black; background-color: black;
float:left; float:left;
margin:2px !important; margin:2px !important;

View File

@ -262,7 +262,7 @@ aside {
margin-top:5px; margin-top:5px;
float:left; float:left;
} }
.formbtn { .formbtn {
background-color:transparent; background-color:transparent;
border: 0px; border: 0px;
@ -363,6 +363,17 @@ aside {
float: left; float: left;
} }
.contact{
background-color:white;
cursor: pointer;
border-top:1px dotted #aaa;
}
.contact:hover{
background-color:#0000a0;
color:white;
}
.avatar { .avatar {
width: 80px; width: 80px;
height: 80px; height: 80px;
@ -454,9 +465,9 @@ aside {
} }
.blur { .blur {
-webkit-filter: blur(25px) brightness(70%) grayscale(100%); -webkit-filter: blur(25px) brightness(70%) grayscale(80%);
/* Safari 6.0 - 9.0 */ /* Safari 6.0 - 9.0 */
filter: blur(25px) brightness(70%) grayscale(100%); filter: blur(25px) brightness(70%) grayscale(80%);
opacity: 0.5; opacity: 0.5;
transition: 0.4s; transition: 0.4s;
} }
@ -468,7 +479,7 @@ aside {
} }
.small { .small {
width: 321px !important; width: 321px;
height: 321px; height: 321px;
line-height: 321px; line-height: 321px;
/* background-color: black; */ /* background-color: black; */
@ -477,7 +488,7 @@ aside {
} }
.smaller { .smaller {
width: 212px !important; width: 212px;
height: 212px; height: 212px;
line-height: 212px; line-height: 212px;
/* background-color: black; */ /* background-color: black; */

View File

@ -39,23 +39,6 @@ function get_urls($input) {
return false; return false;
} }
/* this function replaces the emoji codes in a text with the correspondent emojis
of the specified instance, returns the html code with the emojis in the specified size*/
/*
function emoji($text, $size = 30, $srv) {
$data = json_decode(file_get_contents("https://$srv/api/v1/custom_emojis") , true) [0]['url'];
$u = explode("/", $data);
array_pop($u);
$url = implode("/", $u);
$text = str_replace("http:", "http;", $text);
$text = str_replace("https:", "https;", $text);
$text = preg_replace('~:([a-z0-9_]+):~', "<img src='$url/$1.png' height=$size style='vertical-align: middle;'>", $text);
$text = str_replace("http;", "http:", $text);
$text = str_replace("https;", "https:", $text);
return $text;
}
*/
/* this is the same as above but is used on other places, like user bios and places where the /* this is the same as above but is used on other places, like user bios and places where the
shortcodes and the emoji url is defined in the same place */ shortcodes and the emoji url is defined in the same place */
function emojify($string, $emojis, $size = 40) { function emojify($string, $emojis, $size = 40) {
@ -89,6 +72,22 @@ function emoji_list($val){
return $return; return $return;
} }
function contact_search($val){
global $user_settings;
$return = "";
$list = api_get("/accounts/search?q=".$val);
foreach ($list as $contact){
$return .= "<div class='contact' title='@".$contact['acct']."' style='width:100%; clear:both; height:40px; display:inline-block;'>
<div style='width:40px; height:40px; background-size:cover; background-image:url(".$contact['avatar']."); float:left;'></div>
<div>
<span style='font-weight:bold;'>".emojify($contact['display_name'], $contact['emojis'], 15)."</span><br>
<span style='font-size:12px;'>".$contact['acct']."</span>
</div>
</div>";
}
return $return;
}
/* general function to check if one strings starts with a given search */ /* general function to check if one strings starts with a given search */
function starts_with($string,$search){ function starts_with($string,$search){
@ -921,10 +920,13 @@ function processText($elem) {
global $user_settings; global $user_settings;
require_once "vendor/simple_html_dom.php"; require_once "vendor/simple_html_dom.php";
$content = trim(html_entity_decode($elem['content'],ENT_QUOTES)); $content = trim(html_entity_decode($elem['content'],ENT_QUOTES));
$content = preg_replace("/<(?=[^>]*(?:<|$))/","&lt;",$content);
if (!empty($content)) { if (!empty($content)) {
$html = str_get_html($content); $html = str_get_html($content);
foreach ($html->find('a') as $lnk) { foreach ($html->find('a') as $lnk) {
//remove text links to media attachments
foreach ($elem['media_attachments'] as $f) { foreach ($elem['media_attachments'] as $f) {
if (is_numeric(strpos($f['description'],explode("",$lnk->innertext)[0]))) { if (is_numeric(strpos($f['description'],explode("",$lnk->innertext)[0]))) {
$content = str_replace($lnk->outertext . "<br/>", null, $content); $content = str_replace($lnk->outertext . "<br/>", null, $content);
@ -933,6 +935,7 @@ function processText($elem) {
} }
} }
//modify links for hashtags and external urls
if (is_numeric(strpos($lnk->href, $user_settings['instance'])) || in_array($lnk->class, array( if (is_numeric(strpos($lnk->href, $user_settings['instance'])) || in_array($lnk->class, array(
"u-url mention", "u-url mention",
"hashtag" "hashtag"
@ -947,7 +950,7 @@ function processText($elem) {
} }
} }
} }
$result = strip_tags($content, '<br><p><strong><a><em><strike>'); $result = strip_tags($content, '<br><p><strong><a><em><strike>');
$result = str_replace('<br />', ' <br>', $result); $result = str_replace('<br />', ' <br>', $result);
//$result = str_replace('&#39;', "'", $result); //$result = str_replace('&#39;', "'", $result);
@ -1038,4 +1041,22 @@ function time_elapsed_string($datetime, $full = false) {
if (!$full) $string = array_slice($string, 0, 1); if (!$full) $string = array_slice($string, 0, 1);
return $string ? implode(', ', $string) . ' ago' : 'just now'; return $string ? implode(', ', $string) . ' ago' : 'just now';
}
function getHeaders($respHeaders) {
$headers = array();
$headerText = substr($respHeaders, 0, strpos($respHeaders, "\r\n\r\n"));
foreach (explode("\r\n", $headerText) as $i => $line) {
if ($i === 0) {
$headers['http_code'] = $line;
} else {
list ($key, $value) = explode(': ', $line);
$headers[$key] = $value;
}
}
return $headerText;
} }

View File

@ -22,6 +22,11 @@ $('body').on('click', '#emoji', function(e) {
$(this).closest(".element").find('.picker').css("display","block"); $(this).closest(".element").find('.picker').css("display","block");
}); });
$('body').on('click', '#contact', function(e) {
$(this).closest(".element").find('.contactpicker').css("display","none");
$(this).closest(".element").find('.contactpicker').css("display","block");
});
$('body').on('click', '.emoji', function(e) { $('body').on('click', '.emoji', function(e) {
var code = $(this).attr("title"); var code = $(this).attr("title");
console.log(code); console.log(code);
@ -29,9 +34,16 @@ $('body').on('click', '.emoji', function(e) {
$(this).closest(".element").find("#status").val(boxtxt + ":"+code+":"); $(this).closest(".element").find("#status").val(boxtxt + ":"+code+":");
}); });
$('body').on('click', '.contact', function(e) {
var code = $(this).attr("title");
console.log(code);
boxtxt = $(this).closest(".element").find("#status").val();
$(this).closest(".element").find("#status").val(boxtxt + " "+code);
});
$('body').on('click', '.close', function(e) { $('body').on('click', '.close', function(e) {
$(this).closest('.element').find('.emojilist').html(""); $(this).next().html("");
$(this).closest(".element").find('.picker').css("display","none"); $(this).parent('div').css("display","none");
}); });
$(document).on("change paste keyup","#emojisearch",function () { $(document).on("change paste keyup","#emojisearch",function () {
@ -43,6 +55,15 @@ $(document).on("change paste keyup","#emojisearch",function () {
}); });
}); });
$(document).on("change paste keyup","#contactsearch",function () {
var val = $(this).val();
var list = $(this).closest('.element').find('.contactlist');
console.log(val);
$.get("action.php?a=true&contact=" + val, function(data) {
list.html(data);
});
});
// Open Lightbox // Open Lightbox
$('body').on('click', '.open-lightbox', function(e) { $('body').on('click', '.open-lightbox', function(e) {
e.preventDefault(); e.preventDefault();
@ -186,8 +207,6 @@ $('body').on('click', '.unblock', function() {
}); });
}); });
$('body').on('click', '.autl', function() { $('body').on('click', '.autl', function() {
var id = $(this).attr('id'); var id = $(this).attr('id');
var list = $(this).attr('list'); var list = $(this).attr('list');
@ -307,15 +326,6 @@ $('.container').on('mouseleave', '.preview', function(event) {
$('.container').find('.previewpost').fadeOut(300, function() { $(this).remove(); }); $('.container').find('.previewpost').fadeOut(300, function() { $(this).remove(); });
}); });
/*
$('body').on('mouseleave', '.userinfo', function() {
var id = $(this).attr('id');
$.when($('#' + id + '.userinfo').fadeOut()).then(function() {
$('#' + id + '.userinfo').remove();
});
});
* */
var getUrlParameter = function getUrlParameter(sParam) { var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1), var sPageURL = window.location.search.substring(1),
sURLVariables = sPageURL.split('&'), sURLVariables = sPageURL.split('&'),
@ -392,7 +402,6 @@ $('body').on('click', '.loadmore', function() {
loadmore(); loadmore();
}); });
function newPosts() { function newPosts() {
var thread = getUrlParameter('thread'); var thread = getUrlParameter('thread');
if (typeof thread !== 'undefined') { if (typeof thread !== 'undefined') {
@ -442,35 +451,6 @@ window.setInterval(function() {
newPosts(); newPosts();
}, 25000); }, 25000);
/*
$('body').on('click', '#settings #send', function() {
$('#settings #send').after('<img id="loading" src="img/loading.gif">');
var params = {
attach: $('#settings input[name=attach]:checked').val(),
explicit: $('#settings input[name=explicit]:checked').val(),
replies: $('#settings select[name=replies]').val(),
reblog: $('#settings input[name=reblog]:checked').val(),
mtwords: $('#settings textarea[name=mtwords]').val(),
videoloop: $('#settings input[name=videoloop]:checked').val(),
text: $('#settings input[name=text]:checked').val(),
theme: $('#settings').find('select[name=theme]').val(),
fg: $('#settings').find('input[name=fg]').val(),
bg: $('#settings').find('input[name=bg]').val(),
tx: $('#settings').find('input[name=tx]').val(),
lc: $('#settings').find('input[name=lc]').val(),
bc: $('#settings').find('input[name=bc]').val(),
bw: $('#settings').find('input[name=bw]').val(),
br: $('#settings').find('input[name=br]').val()
};
$.get("?action=settings&ajax=1&" + $.param(params), function(data) {
$('#settings #loading').remove();
$('#settings #send').after('<b id="saved">Settings Saved</b>');
$('#settings #saved').delay(1000).fadeOut("slow");
window.location.reload(true);
});
});
*/
function themecheck(name){ function themecheck(name){
if(name.value == "custom"){ if(name.value == "custom"){
$('#customtheme').css("display","block"); $('#customtheme').css("display","block");
@ -510,5 +490,9 @@ function timeSince(date) {
if (interval >= 1) { if (interval >= 1) {
return interval + " minute"+(interval > 1 ? "s" : ""); return interval + " minute"+(interval > 1 ? "s" : "");
} }
if (interval < 0) {
return " just now";
}
return Math.floor(seconds) + " seconds"; return Math.floor(seconds) + " seconds";
} }

View File

@ -153,17 +153,16 @@ if ($logedin) {
</ul> </ul>
</div> </div>
</span> </span>
<?php <?php else: ?>
else: ?>
<span class="topbutton" style='position:relative;'> <span class="topbutton" style='position:relative;'>
<a href='?page=about' class='fontello topicon ldr' style='text-decoration:none; display:inline; font-size:20px;'>&#xe814; </a> <a href='?page=about' class='fontello topicon ldr' style='text-decoration:none; display:inline; font-size:20px;'>&#xe814; </a>
</span> </span>
<span class="topbutton" style='position:relative;'> <span class="topbutton desktop" style='position:relative;'>
<a href='?page=fediverse' class='fontello topicon ldr' style='text-decoration:none; display:inline; font-size:20px;'>&#xf1e0; </a> <a href='?page=fediverse' class='fontello topicon ldr' style='text-decoration:none; display:inline; font-size:20px;'>&#xf1e0; </a>
</span> </span>
<span class="topbutton" style='position:relative;'> <span class="topbutton desktop" style='position:relative;'>
<a href='?page=privacy' class='fontello topicon ldr' style='text-decoration:none; display:inline; font-size:20px;'>&#xe819; </a> <a href='?page=privacy' class='fontello topicon ldr' style='text-decoration:none; display:inline; font-size:20px;'>&#xe819; </a>
</span> </span>
@ -215,6 +214,7 @@ endif; ?>
<textarea name='status' id="status" style='width:98.85%; height:100px; border:none;'></textarea> <textarea name='status' id="status" style='width:98.85%; height:100px; border:none;'></textarea>
</div> </div>
<div style='display:none; clear:both; width:100%; text-align:left;' class='picker'><input type='text' id='emojisearch' placeholder="Type to Search"><span class='close' style='cursor:pointer;'> X </span><div class='emojilist' style='max-height:100px; overflow:auto;'></div></div> <div style='display:none; clear:both; width:100%; text-align:left;' class='picker'><input type='text' id='emojisearch' placeholder="Type to Search"><span class='close' style='cursor:pointer;'> X </span><div class='emojilist' style='max-height:100px; overflow:auto;'></div></div>
<div style='display:none; clear:both; width:100%; text-align:left;' class='contactpicker'><input type='text' id='contactsearch' placeholder="Type to Search"><span class='close' style='cursor:pointer;'> X </span><div class='contactlist' style='max-height:100px; overflow:auto; scroll-behavior: smooth;'></div></div>
<div class="buttons"> <div class="buttons">
<span style='float:left;'> <span style='float:left;'>
<div style='position:relative;border: 0px; float:left;'> <div style='position:relative;border: 0px; float:left;'>
@ -231,6 +231,9 @@ endif; ?>
<div class='formbtn fontello' id="emoji" style='position:relative; cursor:pointer;'> <div class='formbtn fontello' id="emoji" style='position:relative; cursor:pointer;'>
&#128540; &#128540;
</div> </div>
<div class='formbtn fontello' id="contact" style='position:relative; cursor:pointer;'>
&#xf234;
</div>
</span> </span>
<span style='float:left;' class='status'> <span style='float:left;' class='status'>

View File

@ -194,7 +194,6 @@ if ((!isset($thread[0]['id']) && !empty($thread)) || !is_array($thread)) {
} }
$post['json'] = json_encode($json); $post['json'] = json_encode($json);
/* the options menu of the post */ /* the options menu of the post */
$post['menu'] = "<ul>"; $post['menu'] = "<ul>";
if ($logedin) { if ($logedin) {
@ -241,6 +240,7 @@ if ((!isset($thread[0]['id']) && !empty($thread)) || !is_array($thread)) {
if ($user_settings['attach'] != "off"){ if ($user_settings['attach'] != "off"){
$images = count($elem['media_attachments']); $images = count($elem['media_attachments']);
$class = ($images === 1 ? "" : ($images > 4 ? "class='smaller'" : "class='small'")); $class = ($images === 1 ? "" : ($images > 4 ? "class='smaller'" : "class='small'"));
$m = 1;
foreach ($elem['media_attachments'] as $file) { foreach ($elem['media_attachments'] as $file) {
$ext = explode(".", $file['url']); $ext = explode(".", $file['url']);
$ext = end($ext); $ext = end($ext);
@ -259,12 +259,14 @@ if ((!isset($thread[0]['id']) && !empty($thread)) || !is_array($thread)) {
} }
else { else {
/* we'll either hide the attachment or assign a css class depending on the user's settings */ /* we'll either hide the attachment or assign a css class depending on the user's settings */
/* if the post is marked as sensitive and nsfw hiding isn't turned off, we'll blur the image */
if ($elem['sensitive'] == true && $user_settings['explicit'] != 'off') { if ($elem['sensitive'] == true && $user_settings['explicit'] != 'off') {
$post['media'] .= " <div style='overflow:hidden; float:left; margin:2px;' $class> $post['media'] .= " <div style='overflow:hidden; float:left; margin:2px;background-color:#".(($class != "") || ($elem['sensitive'] == true && $user_settings['explicit'] != 'off') ? averageColor($file['url']) : "000")."!important; ".($images === 1 ? "width:100%;" : "max-width:100%; max-height:100%;")."' $class>
<div class='toggleblur' style='height:25px;'>&#xe81b; Blur</div> <div class='toggleblur' style='height:25px;'>&#xe81b; Blur</div>
<a target='_blank' href='" . $file['url'] . "' onClick='return false;' style='width:100%;' class='blur'> <a target='_blank' href='" . $file['url'] . "' onClick='return false;' style='width:100%;' class='blur'>
<noscript><img src='" . $file['url'] . "' style='width:100%;'></noscript> <noscript><img src='" . $file['url'] . "' style='width:100%;'></noscript>
<img " . ($e < 2 ? "src='" . $file['url'] . "'" : "data-src='" . $file['url'] . "'") . " class='lazyload' style='max-width:100%; max-height:100% vertical-align:middle;'> <img " . ($e < 2 ? "src='" . $file['url'] . "'" : "data-src='" . $file['url'] . "'") . " class='lazyload' style='".($images === 1 ? "width:100%;" : "max-width:100%; max-height:100%;")." vertical-align:middle;'>
</a> </a>
<a target='_blank' href='" . $file['url'] . "' onClick='return false;' class='open-lightbox' style='display:none;'> <a target='_blank' href='" . $file['url'] . "' onClick='return false;' class='open-lightbox' style='display:none;'>
<img src='" . $file['url'] . "' class='lazyload' style='width:100%;'> <img src='" . $file['url'] . "' class='lazyload' style='width:100%;'>
@ -272,10 +274,13 @@ if ((!isset($thread[0]['id']) && !empty($thread)) || !is_array($thread)) {
</div>"; </div>";
} }
else { else {
$post['media'] .= "<div style='margin:0px; background-color:#000;' $class><a target='_blank' href='" . $file['url'] . "' onClick='return false;' class='open-lightbox'><img " . ($e < 2 ? "src='" . $file['url'] . "'" : "data-src='" . $file['url'] . "'") . " class='lazyload' style='" . ($images === 1 ? "width:100%;" : "max-width:100%; max-height:100%;") . " vertical-align:middle;'><noscript><img src='" . $file['url'] . "' style='width:100%;'></noscript></a></div>"; /* If the post was sensitive and wasn't caught by the nsfw filter and
didn't got blurred, then the image will be shown normally */
$post['media'] .= "<div style='margin:0px; ".($images == 3 && $m == 3 ? "width:100% !important;" : "")."background-color:#".($class != "" ? averageColor($file['url']) : "000").";' $class><a target='_blank' href='" . $file['url'] . "' onClick='return false;' class='open-lightbox'><img " . ($e < 2 ? "src='" . $file['url'] . "'" : "data-src='" . $file['url'] . "'") . " class='lazyload' style='" . ($images === 1 ? "width:100%;" : "max-width:100%; max-height:100%;") . " vertical-align:middle;'><noscript><img src='" . $file['url'] . "' style='width:100%;'></noscript></a></div>";
} }
} }
$m++;
} }
} else { } else {
/* if the user turned off attachments we'll only show a link to it */ /* if the user turned off attachments we'll only show a link to it */

View File

@ -3,7 +3,7 @@
<div class='post' id=':id:' pid=':pid:'> <div class='post' id=':id:' pid=':pid:'>
<div id='a:id:' class='ancestors'>:ancestors:</div> <div id='a:id:' class='ancestors'>:ancestors:</div>
<div class='postHeader'> <div class='postHeader'>
<span style='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: </span> <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>
<span style="margin-top:12px; margin-right:10px; float:right; display:block;"> <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 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> </span>

View File

@ -1,12 +1,12 @@
<div class='reply :mode:' id=':id:'> <div class='reply :mode:' id=':id:'>
<div class='postHeader'> <div class='postHeader'>
<span style='margin:7px; display:block; float:left;'> <div style='margin:4px; display:block; float:left;'>
<img src=':avatar:' width=30 style='vertical-align:middle; border-radius:30px;'> <img src=':avatar:' width=30 style='vertical-align:middle; border-radius:30px;'>
<a class='ldr link user' href='?user=:uid:' id=':uid:'> <a class='ldr link user' href='?user=:uid:' id=':uid:'>
<b>:name:</b> <b>:name:</b>
</a> </a>
<span class='desktop'>(:acct:)</span> <span class='desktop'>(:acct:)</span>
</span> </div>
<span style='margin:12px; float:right; display:block;'> <span style='margin:12px; float:right; display:block;'>
<span class='postMenu fontello'>&#xf0c9; <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='display:none; z-index:99; width:130px; position: absolute; top: 15px; right: -1px;' class='menu'>:menu:</div>

View File

@ -10,6 +10,7 @@
<textarea name='status' id="status" style='width:100%; height:100px; border:none;'>:content:</textarea> <textarea name='status' id="status" style='width:100%; height:100px; border:none;'>:content:</textarea>
</div> </div>
<div style='display:none; clear:both; width:100%; text-align:left;' class='picker'><input type='text' id='emojisearch' placeholder="Type to Search"><span class='close' style='cursor:pointer;'> X </span><div class='emojilist' style='max-height:100px; overflow:auto;'></div></div> <div style='display:none; clear:both; width:100%; text-align:left;' class='picker'><input type='text' id='emojisearch' placeholder="Type to Search"><span class='close' style='cursor:pointer;'> X </span><div class='emojilist' style='max-height:100px; overflow:auto;'></div></div>
<div style='display:none; clear:both; width:100%; text-align:left;' class='contactpicker'><input type='text' id='contactsearch' placeholder="Type to Search"><span class='close' style='cursor:pointer;'> X </span><div class='contactlist' style='max-height:100px; overflow:auto; scroll-behavior: smooth;'></div></div>
<div class="buttons"> <div class="buttons">
<div style='float:left;'> <div style='float:left;'>
<div style='position:relative;border: 0px; float:left;'> <div style='position:relative;border: 0px; float:left;'>
@ -26,6 +27,9 @@
<div class='formbtn fontello' id="emoji" style='position:relative; cursor:pointer;'> <div class='formbtn fontello' id="emoji" style='position:relative; cursor:pointer;'>
&#128540; &#128540;
</div> </div>
<div class='formbtn fontello' id="contact" style='position:relative; cursor:pointer;'>
&#xf234;
</div>
</div> </div>
<span style='float:left; margin-left:10px;' class='status'> <span style='float:left; margin-left:10px;' class='status'>

View File

@ -3,7 +3,7 @@
<div class='post' id=':id:' pid=':pid:'> <div class='post' id=':id:' pid=':pid:'>
<div id='a:id:' class='ancestors'>:ancestors:</div> <div id='a:id:' class='ancestors'>:ancestors:</div>
<div class='postHeader'> <div class='postHeader'>
<span style='margin:5px; margin-left:10px; display:block; float:left; line-height:30px;'><img src=':avatar:' width=30 class='mobile' style='vertical-align:middle; border-radius:30px'> :name: :rt: </span> <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>
<span style="margin-top:12px; margin-right:10px; float:right; display:block;"> <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 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> </span>

View File

@ -152,7 +152,14 @@ input[type="checkbox"]:checked+label {
color:black; color:black;
} }
.profile,.loader,.menu,.notif { .postMenu {
background-color: #efd7f3;
border: 2px outset #f2e0f5;
color:black;
padding:2px;
}
.profile,.loader,.menu,.notif,.postMenu > .menu {
background-color: #efd7f3 !important; background-color: #efd7f3 !important;
border: 2px outset #f2e0f5 !important; border: 2px outset #f2e0f5 !important;
} }

View File

@ -15,14 +15,19 @@ label {
color: #425f99; color: #425f99;
} }
textarea,input[type="text"]{ .uploadBox,textarea,input[type="text"]{
background-color:white; background-color:white;
border: 2px inset #fff !important; border: 3px inset #fff !important;
}
.uploadBox {
width:99% !important;
} }
.media{ .media{
border-bottom:2px solid #ffffff !important; border: 2px inset #d1d3d0;
border-top:2px solid #828282 !important; background-color:white;
width:98.4% !important;
} }
input[type="radio"]:checked+label { input[type="radio"]:checked+label {
@ -62,7 +67,7 @@ input[type="checkbox"]:checked+label {
} }
#notifications { #notifications {
background-color: #c3c3c3; background-color: #b8b8b8;
color:black; color:black;
box-shadow: 1px 1px 1px black; box-shadow: 1px 1px 1px black;
} }
@ -80,11 +85,11 @@ input[type="checkbox"]:checked+label {
} }
.new { .new {
background-color:#c3c3c3; background-color:#b8b8b8;
} }
.side_element { .side_element {
background-color: #c3c3c3; background-color: #b8b8b8;
border: 2px outset #fff !important; border: 2px outset #fff !important;
} }
@ -101,18 +106,18 @@ input[type="checkbox"]:checked+label {
color: black !important; color: black !important;
} }
.uploadBox {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.delpic { .delpic {
color:red; color:red;
background-color:white; background-color:white;
} }
input[type="submit"] { input[type="submit"] {
background-color: #c3c3c3; background-color: #b8b8b8;
border: 2px outset #fff !important; border-left: 3px solid #e4e6f3 !important;
border-top: 3px solid #e4e6f3 !important;
border-right: 2px solid #000507 !important;
border-bottom: 2px solid #000507 !important;
border-radius:0px !important;
color:black; color:black;
} }
@ -129,34 +134,51 @@ input[type="submit"] {
} }
.profile,.loader,.menu,.notif { .profile,.loader,.menu,.notif {
background-color: #c3c3c3 !important; background-color: #b8b8b8 !important;
border: 2px outset #fff !important; border: 2px outset #fff !important;
} }
.menu li { .menu li {
background-color: #c3c3c3 !important; background-color: #b8b8b8 !important;
} }
#usermenu .menu { #usermenu .menu {
background-color: #6B91B6; background-color: #6B91B6;
} }
.menu { .postMenu {
background-color: #c3c3c3; background-color: #b8b8b8;
border: 2px outset #fff !important;
color:transparent;
padding:1px 2px 1px 2px;
}
.postMenu::before {
content:'?';
color:black;
font-family:monospace;
font-weight:bold;
position:absolute;
left:3px;
font-size:18px;
}
.postMenu > .menu,.menu {
background-color: #b8b8b8;
border: 2px outset #fff !important; border: 2px outset #fff !important;
color:black; color:black;
padding:2px; padding:2px;
} }
.menu div{ .menu div{
background-color: #c3c3c3; background-color: #b8b8b8;
border: 2px outset #fff !important; border: 2px outset #fff !important;
color:black; color:black;
box-shadow: 1px 1px 2px black; box-shadow: 1px 1px 2px black;
} }
.menu li{ .menu li{
background-color: #c3c3c3; background-color: #b8b8b8;
color:black; color:black;
} }
@ -231,12 +253,16 @@ input[type="submit"] {
.loadmore, .loadmore,
.postform, .postform,
.searchmobile { .searchmobile {
background-color: #c3c3c3; background-color: #b8b8b8;
border: 2px outset #fff !important; border-left: 3px solid #e4e6f3 !important;
border-top: 3px solid #e4e6f3 !important;
border-right: 2px solid #000507 !important;
border-bottom: 2px solid #000507 !important;
border-radius:0px !important;
} }
.previewpost,.userinfo { .previewpost,.userinfo {
background-color: #c3c3c3; background-color: #b8b8b8;
border: 2px outset #fff !important; border: 2px outset #fff !important;
box-shadow: 1px 1px 1px rgba(0,0,0,0.8); box-shadow: 1px 1px 1px rgba(0,0,0,0.8);
color:black; color:black;
@ -253,8 +279,22 @@ input[type="submit"] {
.postHeader { .postHeader {
background-color: #000082; background-color: #000082;
color:white; color:white;
margin:2px;
height:31px !important;
width:99% !important;
font-family:monospace;
} }
.postHeader > div {
margin-top:1px !important;
}
.postHeader > span {
margin-top:6px !important;
}
.reply .postHeader{ .reply .postHeader{
background-color:#808080; background-color:#808080;
border-bottom:3px solid #808080; border-bottom:3px solid #808080;
@ -273,7 +313,7 @@ input[type="submit"] {
display:block; display:block;
margin:5px; margin:5px;
padding:5px; padding:5px;
background-color: #c3c3c3; background-color: #b8b8b8;
border: 2px outset #fff !important; border: 2px outset #fff !important;
color:black; color:black;
} }
@ -333,7 +373,7 @@ input[type="submit"] {
.notif .post_buttons { .notif .post_buttons {
color: black; color: black;
background-color:#c3c3c3; background-color:#b8b8b8;
} }
.reply { .reply {
@ -356,7 +396,7 @@ input[type="submit"] {
} }
.setting input[type="radio"]:checked+label { .setting input[type="radio"]:checked+label {
background-color: #c3c3c3; background-color: #b8b8b8;
border: 2px outset #fff !important; border: 2px outset #fff !important;
color: black; color: black;
} }

View File

@ -1,12 +1,16 @@
.topbar{ .topbar{
background-color: #c3c3c3; background-color: #c3c3c3;
border-top: 1px outset #fff !important; border-top: 2px outset #e4e6f3 !important;
} }
.appname{ .appname{
padding-right:15px; padding-right:15px;
line-height:43px !important; line-height:43px !important;
border: 2px outset #fff !important; border-left: 2px solid #e4e6f3 !important;
border-top: 2px solid #e4e6f3 !important;
border-right: 2px solid #000507 !important;
border-bottom: 2px solid #000507 !important;
margin-top:1px;
} }
.appname a,.topicon { .appname a,.topicon {

View File

@ -0,0 +1,7 @@
.small {
width: 315px !important;
}
.smaller {
width: 209px !important;
}

BIN
themes/wetcat/bg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

425
themes/wetcat/css/color.css Normal file
View File

@ -0,0 +1,425 @@
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 #999999 !important;
}
input[type="radio"]:checked+label {
color: black;
}
input[type="checkbox"]:checked+label {
color: red;
}
.topbar {
background-color: #f1f1f1;
background-image: linear-gradient(#f5f5f5 ,#e6e6e6);
box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
color: black;
border-radius: 8px 8px 0px 0px;
}
.reply .postHeader {
background-color: #f1f1f1;
background-image: linear-gradient(#f5f5f5 ,#e6e6e6);
border-bottom:1px outset #ccc;
}
.gotop {
background-color: rgba(255, 255, 255, 0.5);
}
.gotop a {
color: white;
}
.topicon, .appname > a {
color: black !important;
}
.tiselected {
border-bottom: 2px solid black;
}
.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: black;
}
.alert {
background-color: red;
}
#notifications {
background-color: #c3c3c3;
color:black;
box-shadow: 1px 1px 1px black;
}
.notif,.postAge{
color:black;
}
.notif .text{
color:black !important;
}
.uname {
text-decoration:underline !important;
}
.new {
background-color:#c3c3c3;
}
.side_element {
background-color: #e6e6e6;
border: 1px solid #ababab !important;
border-radius:10px !important;
}
.side_element li:active {
background-color: rgba(255, 255, 255, 0.25);
}
.side_element a, .userinfo a, .userinfo .ldr, .previewpost a {
color: black !important;
}
.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: #fff;
border-radius: 5px !important;
border: 2px solid;
text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
text-align: center;
white-space: nowrap;
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%);
border-top-color: #8ba2c1 !important;
border-right-color: #5890bf !important;
border-bottom-color: #4f93ca !important;
border-left-color: #768fa5 !important;
box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
}
button,.postform input[type="submit"],.reply input[type="submit"] {
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%);
font-family: Lucida Sans, Helvetica, sans-serif;
font-weight: 800;
color: #fff;
padding: 5px $half-height 3px;
border-radius: 12px !important;
border: 2px 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;
// Aqua look
border-top-color: #8ba2c1 !important;
border-right-color: #5890bf !important;
border-bottom-color: #4f93ca !important;
border-left-color: #768fa5 !important;
box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
}
.formbtn {
color:black;
}
.formbtn label{
color:black;
}
#usermenu .menu {
background-color: #6B91B6;
}
.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%);
/* box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 10px; /* FF 3.5+ */
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6) inset;
border-radius:22px !important;
border:1px solid #666;
color:transparent;
padding:3px;
}
.postMenu > .menu,.menu {
background-color: rgba(255,255,255,0.8) !important;
backdrop-filter: blur(10px);
border-radius:5px !important;
background-image:none !important;
border: 0px !important;
color:black;
box-shadow: 2px 2px 5px rgba(0,0,0,0.9);
}
.menu div{
border: 2px outset #fff !important;
color:black;
box-shadow: 1px 1px 2px black;
}
.menu li{
color:black;
}
.menu li:hover,.side_element li:hover {
background-color: #157efb !important;
background-image: linear-gradient(#5c83f9 ,#157efb);
color:white;
}
.menu li a{
color: #000 !important;
text-shadow:none !important;
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:black;
}
.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;
}
.profile,.loader,.menu,.notif,.post,
.rb,
.textonly,
.loadmore,
.postform,
.searchmobile {
background-image: linear-gradient(to right, #ababab , #d3d3d3,#ababab);
border: 1px outset #f2e0f5 !important;
border-radius:8px !important;
box-shadow: 2px 2px 8px rgba(0,0,0,0.9);
}
.postbody{
background-color:white;
border: 1px solid #999999 !important;
border-radius:6px;
padding-top:10px;
padding-bottom:10px;
margin:4px 4px 0px 4px !important;
}
.reply > .postbody {
background-color:transparent;
border: none !important;
padding:0px !important
margin:0px !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 a, .postHeader .link {
color: black;
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(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%);
box-shadow: 0px 1px 2px black;
color:white;
}
.voteBar{
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%);
box-shadow: 0px 1px 2px black;
}
.post_footer > a{
color: black !important;
}
.public::after {
content: '';
}
.unlisted::after {
content: '';
}
.private::after {
content: '';
}
.direct::after {
content: '';
}
.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);
color:black;
}
.reply {
background-color: #ddd;
border-bottom: 1px solid #666;
}
.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: 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%);
box-shadow: 1px 1px 3px black;
border: 0px !important;
}

View File

@ -0,0 +1,13 @@
body {
margin: 0;
background-attachment: fixed;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center top;
}
.content {
width:90% !important;
}

View File

@ -0,0 +1,6 @@
body {
background-attachment: fixed;
background-size: cover;
margin: 0;
}

BIN
themes/wetcat/loadingb.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -167,7 +167,7 @@ input[type="submit"] {
background-size:100px; background-size:100px;
} }
.loader,.menu,.notif { .loader,.menu {
background-color: #e7e9d4 !important; background-color: #e7e9d4 !important;
border-top:2px solid #ffffff; border-top:2px solid #ffffff;
border-left:2px solid #ffffff; border-left:2px solid #ffffff;
@ -175,6 +175,20 @@ input[type="submit"] {
border-right:2px solid #828282; border-right:2px solid #828282;
} }
.notif,.previewpost {
background-color: #fbffbf !important;
border: 1px solid black;
box-shadow: 1px 1px 2px black;
border-radius:10px !important;
}
#notifications .notif {
border-top: 0px;
box-shadow: none;
border-radius:0px !important;
}
.loader a{ .loader a{
color:black; color:black;
} }
@ -287,7 +301,7 @@ input[type="submit"] {
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
} }
.previewpost,.userinfo { .userinfo {
background-color: #e7e9d4 !important; background-color: #e7e9d4 !important;
border:3px solid #042eb8; border:3px solid #042eb8;
} }