web: Updated deleted event style.

- Refactored event messages style
 - Added official z-index layering variables
 - Use a cool ghost for profile image of deleted content

web/css/styles.css

@@ -30,6 +30,12 @@
 
 	/* Font Families */
 	--ffDefault: "Noto Sans", sans-serif;
+
+	/* Z Layers */
+	--zDefault: 0;
+	--zPFP:     1;
+	--zGlobal:  3;
+	--zModal:   5;
 }
 *:focus-visible {
 	/* Technically this is bad and something else should be done to indicate
@@ -96,6 +102,12 @@ button.action {
 	position: sticky;
 	top: 0;
 }
+.event-message {
+	background: #f2f2f2;
+	padding: 10px;
+	border-radius: 12px;
+	color: #444;
+}
 
 /* Navigation */
 #nav {
@@ -129,7 +141,7 @@ button.nav {
 	position: fixed;
 	bottom: 55px;
 	right: 55px;
-	z-index: 3;
+	z-index: var(--zGlobal);
 }
 #gnav button {
 	position: absolute;
@@ -143,10 +155,10 @@ button.nav {
 	border: transparent 5px solid;
 	transition: top 0.05s linear;
 	transform: translateX(-50%) translateY(-50%);
-	z-index: 2;
+	z-index: calc(var(--zGlobal) - 1);
 }
 #gnav button[role="open-gnav"] {
-	z-index: 3;
+	z-index: var(--zGlobal);
 	padding: 15px;
 }
 #gnav.open button[role="sign-out"] {
@@ -194,11 +206,24 @@ button.nav {
 	flex-shrink: 1;
 }
 .pfp {
-	border-radius: 50%;
 	width: 64px;
 	height: 64px;
-	object-fit: fill;
+	position: relative;
+	border-radius: 50%;
+	z-index: var(--zPFP);
 	font-size: 3.25em;
+	object-fit: fill;
+}
+.pfp.deleted {
+	background: var(--clrText);
+	font-size: 32px;
+	color: var(--clrBg);
+}
+.pfp.deleted > i {
+	top: 40%;
+	left: 50%;
+	position: relative;
+	transform: translateX(-50%) translateY(-50%);
 }
 
 .event-content {
@@ -215,19 +240,16 @@ button.nav {
 .chatroom-name {
 	font-weight: bold;
 }
-
 .deleted-comment {
-	border: 2px dashed var(--clrBorder);
+	margin-top: 10px;
-	border-radius: 10px;
-	padding: 10px;
 }
 .line-bot {
 	width: 3px;
 	height: 100%;
-	margin-top: -7px;
+	position: relative;
+	top: -7px;
+	left: calc(50% - 1px);
 	background-color: var(--clrBorder);
-	margin-left: auto;
-	margin-right: auto;
 }
 .quote {
   margin-left: 10px;
@@ -305,31 +327,20 @@ button.nav {
 	color: var(--clrHeart);
 }
 details.cw summary {
-	background: #f2f2f2;
-	padding: 10px;
-	border-radius: 12px;
-	color: #444;
 	cursor: pointer;
-	margin-bottom: 10px;
 	outline: none;
+	margin-bottom: 10px;
 }
 
 /* Thread Expansion */
 .thread-collapsed {
 	padding: 15px; 
 }
-.thread-summary {
-	background: #f2f2f2;
-	padding: 10px;
-	border-radius: 12px;
-	color: #444;
-	cursor: pointer;
-}
 
 /* Modal */
 .modal {
 	position: fixed;
-	z-index: 1; 
+	z-index: var(--zModal); 
 	left: 0;
 	top: 0;
 	width: 100%; 

web/js/damus.js

@@ -1126,7 +1126,7 @@ function format_content(ev, show_media)
 		const open = !!DAMUS.cw_open[ev.id]? "open" : ""
 		return `
 		<details class="cw" id="cw_${ev.id}" ${open}>
-		  <summary>${cwHTML}</summary>
+		  <summary class="event-message">${cwHTML}</summary>
 		  ${body}
 		</details>
 		`

web/js/ui/render.js

@@ -54,7 +54,7 @@ function render_thread_collapsed(model, reply_ev, opts)
 	if (opts.is_composing)
 		return ""
 	return `<div onclick="expand_thread('${reply_ev.id}')" class="thread-collapsed">
-		<div class="thread-summary">
+		<div class="thread-summary event-message">
 		More messages in thread available. Click to expand.
 		</div>
 	</div>`
@@ -163,15 +163,18 @@ function render_boosted_by(model, ev, opts) {
 
 function render_deleted_comment_body(ev, deleted) {
 	if (deleted.content) {
-		const show_media = false
 		return `
-		<div class="deleted-comment">
+		<div class="deleted-comment event-message">
-			This comment was deleted. Reason:
+			This content was deleted with reason: 	
-			<div class="quote">${format_content(deleted, show_media)}</div>
+			<div class="quote">${format_content(deleted, false)}</div>
 		</div>
 		`
 	}
-	return `<div class="deleted-comment">This comment was deleted</div>`
+	return `
+	<div class="deleted-comment event-message">
+		This content was deleted.
+	</div>
+	`
 }
 
 function render_event(model, ev, opts={}) {
@@ -192,7 +195,7 @@ function render_event(model, ev, opts={}) {
 
 	const replied_events = render_replied_events(model, ev, opts)
 
-	let name = "???"
+	let name = ""
 	if (!deleted) {
 		name = render_name_plain(ev.pubkey, profile)
 	}
@@ -222,11 +225,6 @@ function render_event(model, ev, opts={}) {
 	`
 }
 
-function render_pfp(pk, profile) {
-	const name = render_name_plain(pk, profile)
-	return `<img class="pfp" title="${name}" onerror="this.onerror=null;this.src='${robohash(pk)}';" src="${get_picture(pk, profile)}">`
-}
-
 function render_react_onclick(our_pubkey, reacting_to, emoji, reactions) {
 	const reaction = reactions[our_pubkey]
 	if (!reaction) {
@@ -329,11 +327,19 @@ function render_name(pk, profile) {
 }
 
 function render_deleted_name() {
-	return "???"
+	return ""
+}
+
+function render_pfp(pk, profile) {
+	const name = render_name_plain(pk, profile)
+	return `<img class="pfp" title="${name}" onerror="this.onerror=null;this.src='${robohash(pk)}';" src="${get_picture(pk, profile)}">`
 }
 
 function render_deleted_pfp() {
-	return `<div class="pfp pfp-normal">😵</div>`
+	return `
+	<div class="pfp deleted">
+		<i class="fa-solid fa-fw fa-ghost"></i>
+	</div>`
 }