derpibooru branding

assets/css/application.css

@@ -42,9 +42,11 @@
 @import "views/comments";
 @import "views/commissions";
 @import "views/communications";
+@import "views/derpibooru";
 @import "views/duplicates";
 @import "views/filters";
 @import "views/galleries";
+@import "views/game";
 @import "views/images";
 @import "views/notifications";
 @import "views/pages";

assets/css/themes/dark-gray.css

@@ -74,5 +74,5 @@ $image-overlay-background-color: #000000;
  */
 
 :root {
-  --keep: #888888;
+  --logo-color: #9194a5;
 }

assets/css/themes/dark-green.css

@@ -74,5 +74,5 @@ $image-overlay-background-color: #000000;
  */
 
 :root {
-  --keep: #333333;
+  --logo-color: #0fc84d;
 }

assets/css/themes/dark-orange.css

@@ -75,4 +75,5 @@ $image-overlay-background-color: #000000;
 
 :root {
   --comment-color: #b099dd;
+  --logo-color: #fb6115;
 }

assets/css/themes/dark-pink.css

@@ -74,5 +74,5 @@ $image-overlay-background-color: #000000;
  */
 
 :root {
-  --keep: #555555;
+  --logo-color: #e357c5;
 }

assets/css/themes/dark-purple.css

@@ -75,5 +75,5 @@ $image-overlay-background-color: #000000;
  */
 
 :root {
-  --keep: #666666;
+  --logo-color: #9a91d9;
 }

assets/css/themes/dark-red.css

@@ -76,5 +76,5 @@ $image-overlay-background-color: #000000;
  */
 
 :root {
-  --keep: #777777;
+  --logo-color: #ff8080;
 }

assets/css/themes/dark-teal.css

@@ -74,5 +74,5 @@ $image-overlay-background-color: #000000;
  */
 
 :root {
-  --keep: #222222;
+  --logo-color: #49d1ca;
 }

assets/css/themes/dark-yellow.css

@@ -74,5 +74,5 @@ $image-overlay-background-color: #000000;
  */
 
 :root {
-  --keep: #999999;
+  --logo-color: #fbc115;
 }

assets/css/themes/light-gray.css

@@ -67,4 +67,5 @@ $image-overlay-background-color: #000000;
   --media-box-color: hsl(from $base-color h calc(s - 26) calc(l + 20));
   --media-box-hover-color: hsl(from $base-color h calc(s - 20) calc(l + 14));
   --background-odd-color: #eaeaea;
+  --logo-color: #d4d7e9;
 }

assets/css/themes/light-green.css

@@ -58,4 +58,5 @@ $image-overlay-background-color: #000000;
 :root {
   --comment-color: #9273d0;
   --background-odd-color: #e6f3ea;
+  --logo-color: #0ef059;
 }

assets/css/themes/light-orange.css

@@ -56,4 +56,5 @@ $image-overlay-background-color: #000000;
 
 :root {
   --comment-color: #9273d0;
+  --logo-color: #ffad98;
 }

assets/css/themes/light-pink.css

@@ -55,5 +55,5 @@ $image-overlay-background-color: #000000;
  */
 
 :root {
-  --keep: #dddddd;
+  --logo-color: #f6b0c7;
 }

assets/css/themes/light-purple.css

@@ -55,5 +55,5 @@ $image-overlay-background-color: #000000;
  */
 
 :root {
-  --keep: #eeeeee;
+  --logo-color: #b6a0f3;
 }

assets/css/themes/light-red.css

@@ -57,4 +57,5 @@ $image-overlay-background-color: #000000;
 :root {
   --header-admin-color: hsl(from $foreground-color h s calc(l + 60));
   --header-admin-hover-color: hsl(from $foreground-color h s calc(l + 50));
+  --logo-color: #ff8080;
 }

assets/css/themes/light-teal.css

@@ -56,4 +56,5 @@ $image-overlay-background-color: #000000;
 
 :root {
   --background-odd-color: #e2f1f1;
+  --logo-color: #a0f3ef;
 }

assets/css/themes/light-yellow.css

@@ -57,4 +57,5 @@ $image-overlay-background-color: #000000;
 :root {
   --comment-color: #9273d0;
   --background-odd-color: #f5efde;
+  --logo-color: #fbc115;
 }

assets/css/views/derpibooru.css

@@ -0,0 +1,21 @@
+/*
+ * This file contains Derpibooru-specific branding changes
+ * You probably do not want to copy it in your fork.
+ *
+ * This will all be unnecessary in the debranding update anyway,
+ * but for now, we have to hack around :3
+ */
+
+:root {
+  --logo-color: #73d6ed;
+}
+
+i.favicon-home {
+  position: relative;
+  top: 2px;
+  background-image: unset !important;
+  background-color: var(--logo-color);
+  -webkit-mask-image: url("/favicon.svg");
+  mask-image: url("/favicon.svg");
+  mask-size: contain;
+}

assets/css/views/_game.scss → assets/css/views/game.css

@@ -1,15 +1,8 @@
-// Hi, brave soul who reads this.
-// I've written this file like you see mostly
-// because this is how redesign is written.
-// This file is... terrible tbh.
-// Redesign is much better.
 :root {
   --border-radius: 0.25rem;
-
   --team1-color: #38407c;
   --team2-color: #dc591a;
   --middle-color: #7a4a55;
-
   --bar-outline-color: #665773;
 }
 
@@ -60,18 +53,19 @@
   grid-template-columns: auto auto;
 }
 
-.game__title--team1 {
+.game__title--team1,
+.game__title--team2 {
   display: flex;
   flex-direction: row;
   line-height: 2rem;
+}
 
-  & > span {
-    font-size: 16px;
-  }
+.game__title--team1 > span,
+.game__title--team2 > span {
+  font-size: 16px;
 }
 
 .game__title--team2 {
-  @extend .game__title--team1;
   margin-left: auto;
 }
 
@@ -100,12 +94,7 @@
 }
 
 .game__progress_bar {
-  background: linear-gradient(
-    90deg,
-    var(--team1-color) 0%,
-    var(--middle-color) 50%,
-    var(--team2-color) 100%
-  );
+  background: linear-gradient(90deg, var(--team1-color) 0%, var(--middle-color) 50%, var(--team2-color) 100%);
   height: 1rem;
   width: 100%;
 }

assets/css/views/profiles.css

@@ -136,5 +136,5 @@ td.table--stats__sparkline {
 }
 
 .staff-title-muted {
-  color: #777;
-}
+  color: #777777;
+}

lib/philomena/users/user.ex

@@ -611,7 +611,7 @@ defmodule Philomena.Users.User do
     do: user.otp_backup_codes |> Enum.reject(&Password.verify_pass(token, &1))
 
   def theme_colors do
-    ~W(red orange yellow blue green purple teal pink gray)
+    ~W(red orange yellow green blue purple teal pink gray)
   end
 
   def theme_names do