scratch-colorful-messages.css

2 files changed, 44 insertions, 0 deletions

diff --git a/README.md b/README.md
index 61236c3..9f1abcc 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,14 @@ scratchr2, so it won't have an affect on places like your messages page.
 As such, it's not designed to work with people who actively try to interact
 with you.
 
+## scratch-colorful-messages (.css)
+
+Userstyle that makes the message screen colorful, coloring each message row by
+the type of message it is (e.g. making comments blue, studio invites green,
+forum posts pink, and so on).
+
+Targets the scratch-www /messages/ page.
+
 ## scratch-gui-dark (.css)
 
 Silly half-complete userstyle that makes the Scratch 3.0 GUI dark-themed.
diff --git a/scratch-colorful-messages.css b/scratch-colorful-messages.css
new file mode 100644
index 0000000..e1919cc
--- /dev/null
+++ b/scratch-colorful-messages.css
@@ -0,0 +1,36 @@
+.social-message {
+  border-bottom-color: #C5C5C5;
+}
+
+.social-message.mod-forum-activity {
+  background-color: hsl(300, 55%, 92%);
+}
+
+.social-message.mod-comment-message,
+.social-message.mod-follow-user {
+  background-color: hsl(215, 100%, 90%);
+}
+
+.social-message.mod-curator-invite,
+.social-message.mod-become-manager,
+.social-message.mod-studio-activity {
+  background-color: hsl(163, 60%, 85%);
+}
+
+.social-message.mod-love-favorite {
+  background-color: hsl(45, 90%, 95%);
+}
+
+.social-message.mod-love-project {
+  background-color: hsl(350, 100%, 95%);
+}
+
+.social-message.mod-remix-project {
+  background-color: hsl(260, 100%, 90%);
+}
+
+.social-message.mod-unread {
+  background-color: hsl(100, 95%, 95%);
+  box-shadow: 0 2px 3px -2px rgba(0, 200, 200, 80%);
+  position: relative;
+}