130520 User search and wetcat theme

2020-05-13 15:26:38 -05:00 · 2020-05-13 15:26:38 -05:00 · 125b944385
commit 125b944385
parent 1f2b2fd19c
21 changed files with 689 additions and 123 deletions
--- a/action.php
+++ b/action.php
@ -276,12 +276,8 @@ foreach($_GET as $key => $value){
 		case "userinfo":
 			$info = api_get("accounts/".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;'>
 						<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>
@ -326,9 +322,13 @@ foreach($_GET as $key => $value){
 			
 	case "emoji":
 		echo emoji_list(sanitize($value));
-		//die();
+		break;
+
+	case "contact":
+		echo contact_search(sanitize($value));
 		break;
 	}
+
 }


--- a/css/mobile.css
+++ b/css/mobile.css
@ -35,6 +35,10 @@ select{
 	font-family:fontello, sans-serif;
 }

+.postform select,.reply select{
+	width: 45px;
+}
+	
 option{
 	font-family:fontello, sans-serif;
 	}
@ -307,7 +311,6 @@ aside {
 #usermenu .menu {
 	display: none;
 	width: 150px;
-	height: 100px;
 	position: absolute;
 	top: -322px;
 	left: -80px;
@ -366,10 +369,21 @@ aside {
 }

 .felem {
-	margin-left: 10px;
+	margin-left: 7px;
 	float: left;
 }

+.contact{
+	background-color:white;
+	cursor: pointer;
+	border-top:1px dotted #aaa;
+}
+
+.contact:hover{
+	background-color:#0000a0;
+	color:white;
+}
+
 .avatar {
 	width: 80px;
 	background-size: 80px;
@ -413,6 +427,14 @@ aside {
 	text-align: left;
 }

+.postHeader div {
+	white-space: nowrap; 
+	overflow: hidden; 
+	text-overflow: ellipsis;
+}
+
+
+
 .postHeader *,.post_footer *{
 	font-size:small;
 }
@ -468,9 +490,9 @@ aside {
 }

 .blur {
-	-webkit-filter: blur(25px) brightness(70%) grayscale(100%);
+	-webkit-filter: blur(25px) brightness(70%) grayscale(80%);
 	/* Safari 6.0 - 9.0 */
-	filter: blur(25px) brightness(70%) grayscale(100%);
+	filter: blur(25px) brightness(70%) grayscale(80%);
 	opacity: 0.5;
 	transition: 0.4s;
 }
@ -483,8 +505,8 @@ aside {

 .small {
 	width: 48% !important;
-	height: 321px;
-	line-height: 321px;
+	height: 221px;
+	line-height: 221px;
 	background-color: black;
 	float:left;
 	margin:2px !important;
@ -492,8 +514,8 @@ aside {

 .smaller {
 	width: 31% !important;
-	height: 212px;
-	line-height: 212px;
+	height: 112px;
+	line-height: 112px;
 	background-color: black;
 	float:left;
 	margin:2px !important;
--- a/css/style.css
+++ b/css/style.css
@ -363,6 +363,17 @@ aside {
 	float: left;
 }

+.contact{
+	background-color:white;
+	cursor: pointer;
+	border-top:1px dotted #aaa;
+}
+
+.contact:hover{
+	background-color:#0000a0;
+	color:white;
+}
+
 .avatar {
 	width: 80px;
 	height: 80px;
@ -454,9 +465,9 @@ aside {
 }

 .blur {
-	-webkit-filter: blur(25px) brightness(70%) grayscale(100%);
+	-webkit-filter: blur(25px) brightness(70%) grayscale(80%);
 	/* Safari 6.0 - 9.0 */
-	filter: blur(25px) brightness(70%) grayscale(100%);
+	filter: blur(25px) brightness(70%) grayscale(80%);
 	opacity: 0.5;
 	transition: 0.4s;
 }
@ -468,7 +479,7 @@ aside {
 }

 .small {
-	width: 321px !important;
+	width: 321px;
 	height: 321px;
 	line-height: 321px;
 	/* background-color: black; */
@ -477,7 +488,7 @@ aside {
 }

 .smaller {
-	width: 212px !important;
+	width: 212px;
 	height: 212px;
 	line-height: 212px;
 	/* background-color: black; */
--- a/include/functions.php
+++ b/include/functions.php
@ -39,23 +39,6 @@ function get_urls($input) {
 	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 
 shortcodes and the emoji url is defined in the same place */
 function emojify($string, $emojis, $size = 40) {
@ -89,6 +72,22 @@ function emoji_list($val){
 	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 */ 	
 function starts_with($string,$search){
@ -921,10 +920,13 @@ function processText($elem) {
 	global $user_settings;
 	require_once "vendor/simple_html_dom.php";
 	$content = trim(html_entity_decode($elem['content'],ENT_QUOTES));
+	$content = preg_replace("/<(?=[^>]*(?:<|$))/","&lt;",$content);
 	
 	if (!empty($content)) {
 		$html = str_get_html($content);
 		foreach ($html->find('a') as $lnk) {
+			
+			//remove text links to media attachments
 			foreach ($elem['media_attachments'] as $f) {
 				if (is_numeric(strpos($f['description'],explode("…",$lnk->innertext)[0]))) {
 					$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(
 				"u-url mention",
 				"hashtag"
@ -1039,3 +1042,21 @@ function time_elapsed_string($datetime, $full = false) {
    if (!$full) $string = array_slice($string, 0, 1);
    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;
+}
--- a/js/scripts.js
+++ b/js/scripts.js
@ -22,6 +22,11 @@ $('body').on('click', '#emoji', function(e) {
 	$(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) {
 	var code = $(this).attr("title");
 	console.log(code);
@ -29,9 +34,16 @@ $('body').on('click', '.emoji', function(e) {
 	$(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) {
-	$(this).closest('.element').find('.emojilist').html("");
-	$(this).closest(".element").find('.picker').css("display","none");
+	$(this).next().html("");
+	$(this).parent('div').css("display","none");
 });

 $(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
 $('body').on('click', '.open-lightbox', function(e) {
 	e.preventDefault();
@ -186,8 +207,6 @@ $('body').on('click', '.unblock', function() {
 	});
 });

-
-
 $('body').on('click', '.autl', function() {
 	var id = $(this).attr('id');
 	var list = $(this).attr('list');
@ -307,15 +326,6 @@ $('.container').on('mouseleave', '.preview', function(event) {
 	$('.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 sPageURL = window.location.search.substring(1),
 		sURLVariables = sPageURL.split('&'),
@ -392,7 +402,6 @@ $('body').on('click', '.loadmore', function() {
 	loadmore();
 });

-
 function newPosts() {
 	var thread = getUrlParameter('thread');
 	if (typeof thread !== 'undefined') {
@ -442,35 +451,6 @@ window.setInterval(function() {
 	newPosts();
 }, 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){
 	if(name.value == "custom"){
 		$('#customtheme').css("display","block");
@ -510,5 +490,9 @@ function timeSince(date) {
  if (interval >= 1) {
    return interval + " minute"+(interval > 1 ? "s" : "");
  }
+  
+  if (interval < 0) {
+    return " just now";
+  }
  return Math.floor(seconds) + " seconds";
 }
--- a/layout/header.php
+++ b/layout/header.php
@ -153,17 +153,16 @@ if ($logedin) {
 				</ul>
 			</div>
 		</span>
-		<?php
-else: ?>
+		<?php else: ?>
 		<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>
 		</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>
 		</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>
 		</span>		
 		
@ -215,6 +214,7 @@ endif; ?>
 						<textarea name='status' id="status" style='width:98.85%; height:100px; border:none;'></textarea>
 					</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">
 					<span style='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;'>
 							&#128540;
 						</div>
+						<div class='formbtn fontello' id="contact" style='position:relative; cursor:pointer;'>
+							&#xf234;
+						</div>
 					</span>
 					<span style='float:left;' class='status'>

--- a/modules/timeline.php
+++ b/modules/timeline.php
@ -194,7 +194,6 @@ if ((!isset($thread[0]['id']) && !empty($thread)) || !is_array($thread)) {
 		}
 		$post['json'] = json_encode($json);

-
 		/* the options menu of the post */
 		$post['menu'] = "<ul>";
 		if ($logedin) {
@ -241,6 +240,7 @@ if ((!isset($thread[0]['id']) && !empty($thread)) || !is_array($thread)) {
 			if ($user_settings['attach'] != "off"){
 				$images = count($elem['media_attachments']);
 				$class = ($images === 1 ? "" : ($images > 4 ? "class='smaller'" : "class='small'"));
+				$m = 1;
 				foreach ($elem['media_attachments'] as $file) {
 					$ext = explode(".", $file['url']);
 					$ext = end($ext);
@ -259,12 +259,14 @@ if ((!isset($thread[0]['id']) && !empty($thread)) || !is_array($thread)) {
 					}
 					else {
 						/* 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') {
-							$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>
 													<a target='_blank' href='" . $file['url'] . "' onClick='return false;' style='width:100%;' class='blur'>
 														<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 target='_blank' href='" . $file['url'] . "' onClick='return false;' class='open-lightbox' style='display:none;'>
 														<img src='" . $file['url'] . "' class='lazyload' style='width:100%;'>
@ -272,10 +274,13 @@ if ((!isset($thread[0]['id']) && !empty($thread)) || !is_array($thread)) {
 												</div>";
 						}
 						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 {
 				/* if the user turned off attachments we'll only show a link to it */
--- a/templates/post.txt
+++ b/templates/post.txt
@ -3,7 +3,7 @@
 	<div class='post' id=':id:' pid=':pid:'>
 		<div id='a:id:' class='ancestors'>:ancestors:</div>
 		<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 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>
--- a/templates/reply.txt
+++ b/templates/reply.txt
@ -1,12 +1,12 @@
 <div class='reply :mode:' id=':id:'>
 	<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;'>
 			<a class='ldr link user' href='?user=:uid:' id=':uid:'>
 				<b>:name:</b>
 			</a>
 			<span class='desktop'>(:acct:)</span>
-		</span>
+		</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>
--- a/templates/replyform.txt
+++ b/templates/replyform.txt
@ -10,6 +10,7 @@
 			<textarea name='status' id="status" style='width:100%; height:100px; border:none;'>:content:</textarea>
 		</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 style='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;'>
 					&#128540;
 				</div>
+				<div class='formbtn fontello' id="contact" style='position:relative; cursor:pointer;'>
+					&#xf234;
+				</div>
 			</div>
 			<span style='float:left; margin-left:10px;' class='status'>
 				
--- a/templates/textpost.txt
+++ b/templates/textpost.txt
@ -3,7 +3,7 @@
 	<div class='post' id=':id:' pid=':pid:'>
 		<div id='a:id:' class='ancestors'>:ancestors:</div>
 		<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 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>
--- a/themes/1994/css/color.css
+++ b/themes/1994/css/color.css
@ -152,7 +152,14 @@ input[type="checkbox"]:checked+label {
 	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;
 	border: 2px outset #f2e0f5 !important;
 }
--- a/themes/chicago/css/color.css
+++ b/themes/chicago/css/color.css
@ -15,14 +15,19 @@ label {
 	color: #425f99;
 }

-textarea,input[type="text"]{
+.uploadBox,textarea,input[type="text"]{
 	background-color:white;
-	border: 2px inset #fff !important;
+	border: 3px inset #fff !important;
+}
+
+.uploadBox {
+	width:99% !important;
 }

 .media{
-	border-bottom:2px solid #ffffff !important;
-	border-top:2px solid #828282 !important;
+	border: 2px inset #d1d3d0;
+	background-color:white;
+	width:98.4% !important;
 }

 input[type="radio"]:checked+label {
@ -62,7 +67,7 @@ input[type="checkbox"]:checked+label {
 }

 #notifications {
-	background-color: #c3c3c3;
+	background-color: #b8b8b8;
 	color:black;
 	box-shadow: 1px 1px 1px black;
 }
@ -80,11 +85,11 @@ input[type="checkbox"]:checked+label {
 }

 .new {
-	background-color:#c3c3c3;
+	background-color:#b8b8b8;
 }

 .side_element {
-	background-color: #c3c3c3;
+	background-color: #b8b8b8;
 	border: 2px outset #fff !important;
 }

@ -101,18 +106,18 @@ input[type="checkbox"]:checked+label {
 	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"] {
-	background-color: #c3c3c3;
-	border: 2px outset #fff !important;
+	background-color: #b8b8b8;
+	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; 
 }

@ -129,34 +134,51 @@ input[type="submit"] {
 }

 .profile,.loader,.menu,.notif {
-	background-color: #c3c3c3 !important;
+	background-color: #b8b8b8 !important;
 	border: 2px outset #fff !important;
 }

 .menu li {
-	background-color: #c3c3c3 !important;
+	background-color: #b8b8b8 !important;
 }

 #usermenu .menu {
 	background-color: #6B91B6;
 }

-.menu {
-	background-color: #c3c3c3;
+.postMenu {
+	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;
 	color:black;
 	padding:2px;
 }

 .menu div{
-	background-color: #c3c3c3;
+	background-color: #b8b8b8;
 	border: 2px outset #fff !important;
 	color:black;
 	box-shadow: 1px 1px 2px black;
 }

 .menu li{
-	background-color: #c3c3c3;
+	background-color: #b8b8b8;
 	color:black;
 }

@ -231,12 +253,16 @@ input[type="submit"] {
 .loadmore,
 .postform,
 .searchmobile {
-	background-color: #c3c3c3;
-	border: 2px outset #fff !important;
+	background-color: #b8b8b8;
+	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 {
-	background-color: #c3c3c3;
+	background-color: #b8b8b8;
 	border: 2px outset #fff !important;
 	box-shadow: 1px 1px 1px rgba(0,0,0,0.8);
 	color:black;
@ -253,8 +279,22 @@ input[type="submit"] {
 .postHeader {
 	background-color: #000082;
 	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{
 	background-color:#808080;
 	border-bottom:3px solid #808080;
@ -273,7 +313,7 @@ input[type="submit"] {
 	display:block;
 	margin:5px;
 	padding:5px;
-	background-color: #c3c3c3;
+	background-color: #b8b8b8;
 	border: 2px outset #fff !important;
 	color:black; 
 }
@ -333,7 +373,7 @@ input[type="submit"] {

 .notif .post_buttons {
 	color: black;
-	background-color:#c3c3c3;
+	background-color:#b8b8b8;
 }

 .reply {
@ -356,7 +396,7 @@ input[type="submit"] {
 }

 .setting input[type="radio"]:checked+label {
-	background-color: #c3c3c3;
+	background-color: #b8b8b8;
 	border: 2px outset #fff !important;
 	color: black;
 }
--- a/themes/chicago/css/mobile.css
+++ b/themes/chicago/css/mobile.css
@ -1,12 +1,16 @@
 .topbar{
 	background-color: #c3c3c3;
-	border-top: 1px outset #fff !important;
+	border-top: 2px outset #e4e6f3 !important;
 }

 .appname{
 	padding-right:15px;
 	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 {
--- a/themes/chicago/css/style.css
+++ b/themes/chicago/css/style.css
@ -0,0 +1,7 @@
+.small {
+	width: 315px !important;
+}
+
+.smaller {
+	width: 209px !important;
+}
--- a/themes/wetcat/bg.jpg
+++ b/themes/wetcat/bg.jpg
--- a/themes/wetcat/css/color.css
+++ b/themes/wetcat/css/color.css
@ -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;
+}
--- a/themes/wetcat/css/mobile.css
+++ b/themes/wetcat/css/mobile.css
@ -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;
+}
+
+
--- a/themes/wetcat/css/style.css
+++ b/themes/wetcat/css/style.css
@ -0,0 +1,6 @@
+body {
+	background-attachment: fixed;
+    background-size: cover;
+	margin: 0;
+}
+
--- a/themes/wetcat/loadingb.gif
+++ b/themes/wetcat/loadingb.gif
--- a/themes/whistler/css/color.css
+++ b/themes/whistler/css/color.css
@ -167,7 +167,7 @@ input[type="submit"] {
 	background-size:100px;
 }

-.loader,.menu,.notif {
+.loader,.menu {
 	background-color: #e7e9d4 !important;
 	border-top:2px solid #ffffff;
 	border-left:2px solid #ffffff;
@ -175,6 +175,20 @@ input[type="submit"] {
 	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{
 	color:black;
 }
@ -287,7 +301,7 @@ input[type="submit"] {
 	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
 }

-.previewpost,.userinfo {
+.userinfo {
 	background-color: #e7e9d4 !important;
 	border:3px solid #042eb8;
 }