From 236b141787eb2089aba89294950a0aed9db5e96f Mon Sep 17 00:00:00 2001
From: Evangelos Paterakis <evan@geopjr.dev>
Date: Sat, 4 Nov 2023 02:13:22 +0200
Subject: [PATCH] feat(style): organize, cleanup

---
 data/gtk/dropdown/expiration_title.ui |   2 +-
 data/gtk/dropdown/language_title.ui   |   2 +-
 data/style.css                        | 547 +++++++++++++-------------
 data/ui/widgets/status.ui             |   1 -
 4 files changed, 276 insertions(+), 276 deletions(-)

diff --git a/data/gtk/dropdown/expiration_title.ui b/data/gtk/dropdown/expiration_title.ui
index ef80442a3..f637bfeae 100644
--- a/data/gtk/dropdown/expiration_title.ui
+++ b/data/gtk/dropdown/expiration_title.ui
@@ -8,7 +8,7 @@
           </lookup>
         </binding>
         <style>
-          <class name="locale-dropdown-upcase"/>
+          <class name="uppercase"/>
         </style>
       </object>
     </property>
diff --git a/data/gtk/dropdown/language_title.ui b/data/gtk/dropdown/language_title.ui
index 62fc81aed..66ae838fb 100644
--- a/data/gtk/dropdown/language_title.ui
+++ b/data/gtk/dropdown/language_title.ui
@@ -17,7 +17,7 @@
               </lookup>
             </binding>
             <style>
-              <class name="locale-dropdown-upcase"/>
+              <class name="uppercase"/>
             </style>
           </object>
         <!-- </child>
diff --git a/data/style.css b/data/style.css
index 7c0a35c64..af998dfa8 100644
--- a/data/style.css
+++ b/data/style.css
@@ -1,13 +1,34 @@
-.ttl-sidebar .badge {
-	font-weight: bold;
-	font-size: 0.8em;
-	border-radius: 10px;
-	min-width: 0.7em;
-	padding: 2px 5px;
-	background: @accent_bg_color;
-	color: @text_view_bg;
-}
+/* Celebrate styles */
+.about .app-version{color:#fff;text-shadow:-1px -1px 0#000,1px -1px 0#000,-1px 1px 0#000,1px 1px 0#000;background:linear-gradient(150deg,#fdd81755 0,#66338b55 8.3%,#fff5 16.6%,#f4aec855 24.9%,#7bcce555 33.2%,#94551655 41.5%,#0005 49.8%,#e2201655 58.1%,#f2891755 66.4%,#efe52455 74.7%,#78b82a55 83%,#2c58a4 91.3%,#6d238055 100%);}
+.about .app-version:hover{background:radial-gradient(circle at 9.75% 50%,#0000 6.66%,#7902aa 6.7%,#0000 8.4%),conic-gradient(at 26.66% 50%,#0000 222.75deg,#ffd800 0 317.25deg,#0000 0),conic-gradient(at 33% 50%,#0000 222.75deg,white 0 317.25deg,#0000 0),conic-gradient(at 39% 50%,#0000 222.75deg,#ffa6b9 0 317.25deg,#0000 0),conic-gradient(at 45.66% 50%,#0000 222.75deg,#00d2ff 0 317.25deg,#0000 0),conic-gradient(at 52% 50%,#0000 222.75deg,#753000 0 317.25deg,#0000 0),conic-gradient(at 58.33% 50%,#0000 222.75deg,#000 0 317.25deg,#0000 0),linear-gradient(to bottom,#e40303,#e40303 16.67%,#ff8c00 16.67%,#ff8c00 33.33%,#ffed00 33.33%,#ffed00 50%,#008026 50%,#008026 66.67%,#004dff 66.67%,#004dff 83.33%,#750787 83.33%,#750787);}
+.theme-disability.about .app-version{background:linear-gradient(45deg,#59595955 0,#59595955 37.5%,#cf728055 37.5%,#cf728055 42.5%,#eede7755 42.5%,#eede7755 47.5%,#e8e8e855 47.5%,#e8e8e855 52.5%,#7bc2e055 52.5%,#7bc2e055 57.5%,#3bb07d55 57.5%,#3bb07d55 62.5%,#59595955 62.5%,#59595955 100%);}
+.theme-disability.about .app-version:hover{background:linear-gradient(45deg,#595959 0,#595959 37.5%,#cf7280 37.5%,#cf7280 42.5%,#eede77 42.5%,#eede77 47.5%,#e8e8e8 47.5%,#e8e8e8 52.5%,#7bc2e0 52.5%,#7bc2e0 57.5%,#3bb07d 57.5%,#3bb07d 62.5%,#595959 62.5%,#595959 100%);}
+.theme-lesbian.about .app-version{background:linear-gradient(to bottom,#d1260155,#d1260155 20%,#ff8f4555 20%,#ff8f4555 40%,#fff5 40%,#fff5 60%,#cf559b55 60%,#cf559b55 80%,#9b1a5855 80%,#9b1a5855);}
+.theme-lesbian.about .app-version:hover{background:linear-gradient(to bottom,#d12601,#d12601 20%,#ff8f45 20%,#ff8f45 40%,#fff 40%,#fff 60%,#cf559b 60%,#cf559b 80%,#9b1a58 80%,#9b1a58);}
+.theme-pan.about .app-version{background:linear-gradient(to bottom,#ff218c55,#ff218c55 33.33%,#fed80055 33.33%,#fed80055 66.67%,#21b1ff55 66.67%,#21b1ff55);}
+.theme-pan.about .app-version:hover{background:linear-gradient(to bottom,#ff218c,#ff218c 33.33%,#fed800 33.33%,#fed800 66.67%,#21b1ff 66.67%,#21b1ff);}
+.theme-trans.about .app-version{background:linear-gradient(to bottom,#5ccefa55,#5ccefa55 20%,#f6a8b755 20%,#f6a8b755 40%,#fff5 40%,#fff5 60%,#f6a8b755 60%,#f6a8b755 80%,#5ccefa55 80%,#5ccefa55);}
+.theme-trans.about .app-version:hover{background:linear-gradient(to bottom,#5ccefa,#5ccefa 20%,#f6a8b7 20%,#f6a8b7 40%,#fff 40%,#fff 60%,#f6a8b7 60%,#f6a8b7 80%,#5ccefa 80%,#5ccefa);}
+.theme-bi.about .app-version{background:linear-gradient(to bottom,#d6027055,#d6027055 40%,#9a4f9655 40%,#9a4f9655 60%,#0039a955 60%,#0039a955);}
+.theme-bi.about .app-version:hover{background:linear-gradient(to bottom,#d60270,#d60270 40%,#9a4f96 40%,#9a4f96 60%,#0039a9 60%,#0039a9);}
+.theme-agender.about .app-version{background:linear-gradient(to bottom,#0005,#00000055 14.29%,#bcc4c755 14.29%,#bcc4c755 28.57%,#fff5 28.57%,#fff5 42.86%,#b7f58455 42.86%,#b7f58455 57.14%,#fff5 57.14%,#fff5 71.43%,#bcc4c755 71.43%,#bcc4c755 85.71%,#00000055 85.71%,#0005);}
+.theme-agender.about .app-version:hover{background:linear-gradient(to bottom,#000,#000 14.29%,#bcc4c7 14.29%,#bcc4c7 28.57%,#fff 28.57%,#fff 42.86%,#b7f584 42.86%,#b7f584 57.14%,#fff 57.14%,#fff 71.43%,#bcc4c7 71.43%,#bcc4c7 85.71%,#000 85.71%,#000);}
+.theme-aro.about .app-version{background:linear-gradient(to bottom,#309c3455,#309c3455 20%,#9dce6955 20%,#9dce6955 40%,#fff5 40%,#fff5 60%,#a0a0a055 60%,#a0a0a055 80%,#0005 80%,#0005);}
+.theme-aro.about .app-version:hover{background:linear-gradient(to bottom,#309c34,#309c34 20%,#9dce69 20%,#9dce69 40%,#fff 40%,#fff 60%,#a0a0a0 60%,#a0a0a0 80%,#000 80%,#000);}
+.theme-ace.about .app-version{background:linear-gradient(to bottom,#0005,#0005 25%,#a3a3a355 25%,#a3a3a355 50%,#fff5 50%,#fff5 75%,#82008055 75%,#82008055);}
+.theme-ace.about .app-version:hover{background:linear-gradient(to bottom,#000,#000 25%,#a3a3a3 25%,#a3a3a3 50%,#fff 50%,#fff 75%,#820080 75%,#820080);}
+.theme-non-binary.about .app-version{background:linear-gradient(to bottom,#fdf52f55,#fdf52f55 25%,#fff5 25%,#fff5 50%,#9d5ad255 50%,#9d5ad255 75%,#0005 75%,#0005);}
+.theme-non-binary.about .app-version:hover{background:linear-gradient(to bottom,#fdf52f,#fdf52f 25%,#fff 25%,#fff 50%,#9d5ad2 50%,#9d5ad2 75%,#000 75%,#000);}
+.theme-black-history.about .app-version{background:linear-gradient(to bottom,#e31b2355,#e31b2355 33%,#0005 33%,#0005 66%,#00853f55 66%,#00853f55);}
+.theme-black-history.about .app-version:hover{background:linear-gradient(to bottom,#e31b23,#e31b23 33%,#000 33%,#000 66%,#00853f 66%,#00853f);}
+.theme-aids.about .app-version{background:linear-gradient(to bottom,#ffffff55,#ffffff55 20%,#d1111355 20%,#d1111355 40%,#ffffff55 40%,#ffffff55 60%,#d1111355 60%,#d1111355 80%,#ffffff55 80%,#ffffff55);}
+.theme-aids.about .app-version:hover{background:linear-gradient(to bottom,#fff,#fff 20%,#d11113 20%,#d11113 40%,#fff 40%,#fff 60%,#d11113 60%,#d11113 80%,#fff 80%,#fff);}
+.theme-intersex.about .app-version{background:radial-gradient(closest-side circle at center,#ffd80055 44%,#7902aa55 44%,#7902aa55 56%,#ffd80055 56%);}
+.theme-intersex.about .app-version:hover{background:radial-gradient(closest-side circle at center,#ffd800 44%,#7902aa 44%,#7902aa 56%,#ffd800 56%);}
+.theme-autism.about .app-version{background:linear-gradient(to bottom,#e5304355,#e5304355 16.66%,#f6834755 16.66%,#f6834755 33.33%,#fac85755 33.33%,#fac85755 66.67%,#99d67155 66.67%,#99d67155 83.33%,#21ae7555 83.33%,#21ae7555);}
+.theme-autism.about .app-version:hover{background:linear-gradient(to bottom,#e53043,#e53043 16.66%,#f68347 16.66%,#f68347 33.33%,#fac857 33.33%,#fac857 66.67%,#99d671 66.67%,#99d671 83.33%,#21ae75 83.33%,#21ae75);}
 
+/* Utility styles */
 .font-bold {
 	font-weight: bold;
 }
@@ -16,25 +37,16 @@
 	box-shadow: none;
 }
 
-headerbar.flat.no-title .title {
-	opacity: 0;
-}
-
-.attachment,
-.attachment button,
-flowboxchild {
-	padding: 0px;
-	margin: 0px;
+.italic {
+	font-style: italic;
 }
 
-.cover-badge {
-	padding: 6px 12px;
-	border-radius: 6px;
-	margin: 8px;
+.monospace {
+	font-family: monospace;
 }
 
-.cover-badge.only-icon {
-	padding: 6px;
+.no-transition {
+	transition: none;
 }
 
 .ttl-flat-button {
@@ -42,72 +54,81 @@ flowboxchild {
 	margin: 0px;
 }
 
-.ttl-thread-line {
-	background: @theme_fg_color;
-	opacity: .1;
+.background-none {
+	background: none;
 }
 
-.ttl-code {
-	padding: 12px;
-	background: rgba(150, 150, 150, .1);
-	border-radius: 6px;
+.uppercase {
+	text-transform: uppercase;
 }
 
-.italic {
-	font-style: italic;
+.attachment-picture {
+	border-radius: 6px;
 }
 
-.monospace {
-	font-family: monospace;
+/* Animations */
+@keyframes rotate_star {
+	from { -gtk-icon-transform: rotate(-72deg); }
+	to {}
 }
 
-.ttl-label-emoji-no-click:hover {
-	background: transparent;
+@keyframes bounce {
+	0% { -gtk-icon-transform: translateY(-3px); }
+	50% { -gtk-icon-transform: translateY(3px); }
+	100% {}
 }
 
-.ttl-label-emoji-no-click {
-	background: transparent;
-	padding: 0;
+@keyframes rotate_half {
+	from { -gtk-icon-transform: rotate(-180deg); }
+	to {}
 }
 
-.ttl-name-button {
-	padding: 0 5px;
-	margin-left: -5px;
-	margin-right: -5px;
+/* Sidebar */
+.ttl-sidebar .badge { /* Wide view badge */
+	font-weight: bold;
+	font-size: 0.8em;
+	border-radius: 10px;
+	min-width: 0.7em;
+	padding: 2px 5px;
+	background: @accent_bg_color;
+	color: @text_view_bg;
 }
 
-/*
-	Profile
-*/
+.sidebar-item {
+	padding: 3px 14px;
+}
 
-.ttl-profile-cover .header-image {
-	background: grey;
+.ttl-separator {
+	background-color: transparent;
+	min-height: 8px;
 }
 
-.ttl-profile-cover avatar, .profile-editor avatar {
-	border: 6px solid @dialog_bg_color;
-	background: @dialog_bg_color;
+/* MarkupView */
+.ttl-code {
+	padding: 12px;
+	background: rgba(150, 150, 150, .1);
+	border-radius: 6px;
 }
 
-.large .header-image {
-	border-radius: 12px 12px 0 0;
+/* Status */
+.ttl-name-button {
+	padding: 0 5px;
+	margin-left: -5px;
+	margin-right: -5px;
 }
 
-/* Status action icons */
-@keyframes rotate_star {
-	from { -gtk-icon-transform: rotate(-72deg); }
-	to {}
+.ttl-thread-line {
+	background: @theme_fg_color;
+	opacity: .1;
 }
 
-@keyframes bounce {
-	0% { -gtk-icon-transform: translateY(-3px); }
-	50% { -gtk-icon-transform: translateY(3px); }
-	100% {}
+.ttl-thread-line.top {
+	margin-top: -18px;
+	margin-bottom: -3px;
 }
 
-@keyframes rotate_half {
-	from { -gtk-icon-transform: rotate(-180deg); }
-	to {}
+.ttl-thread-line.bottom {
+	margin-bottom: -20px;
 }
 
 .ttl-status-action-reblog.enabled image {
@@ -158,230 +179,263 @@ flowboxchild {
 	color: @red_4;
 }
 
-.ttl-profile-stat-button,
-.small .ttl-profile-stat-button:first-child,
-.small .ttl-profile-stat-button:last-child {
-	border-radius: 0px;
-	padding: 8px 12px;
-	min-height: 32px;
+.ttl-status-font-large { /* larger font size */
+	font-size: larger;
 }
 
-.small .ttl-profile-cover>.content {
-	border-bottom-left-radius: 0px;
-	border-bottom-right-radius: 0px;
+.ttl-large-body { /* expanded */
+	font-size: larger;
 }
 
-.ttl-box-no-shadow>revealer>box {
-	box-shadow: none;
+.ttl-status-font-large > .ttl-large-body { /* larger font size + expanded */
+	font-size: larger;
 }
 
-.ttl-status-font-large {
-	font-size: larger;
+.ttl-status-line-height-large { /* larger line height */
+	line-height: 1.4;
 }
 
-.ttl-status-font-large > .ttl-large-body {
-	font-size: larger;
+.ttl-status-heading {
+	font-size: small;
+
+	/*
+		We want the heading to have padding but also
+		start at the same x position as the body
+		so we set negative margins
+	*/
+	margin-top: -5px;
+	padding: 0 5px;
+	margin-left: -5px;
+	margin-right: -5px;
 }
 
-.ttl-large-body {
-	font-size: larger;
+.ttl-status-avatar-actor {
+	margin-top: -20px;
+	margin-left: -6px;
+	padding: 0;
+	background: none;
 }
 
-.ttl-status-line-height-large {
-	line-height: 1.4;
+.ttl-status-avatar-border {
+	border: 3px solid @popover_bg_color;
+	border-radius: 100%;
+	
+	/*
+		The actor avi is visible when the author avi
+		is transparent, so set it to the bg
+	*/
+	background-color: @popover_bg_color;
 }
 
-.ttl-status-badge {
-	color: white;
+.ttl-post.direct { /* Distinguish DMs */
+	background-color: alpha(@warning_bg_color, .1);
+}
+
+.ttl-post.direct:hover {
+	background-color: darker(alpha(@warning_bg_color, .1));
+}
+
+.ttl-post-actions {
+	/* We want the actions to ignore the card padding */
+	margin-bottom: -12px;
+}
+
+.ttl-quote { /* Quote posts on akkoma etc */
 	border-radius: 6px;
-	margin: 8px;
+	font-weight: initial;
 }
 
-.ttl-status-badge:not(.attachmentpageattachment) {
-	background-color: rgba(0, 0, 0, .8);
+/* Preview card */
+.preview_card {
+	padding: 0;
 }
 
-.ttl-status-badge.attachmentpageattachment>*.error {
-	background-color: alpha(mix(@red_4, white, .8), .8);
+.preview_card_image:dir(ltr) {
+	border-radius: 6px 0px 0px 6px;
 }
 
-.ttl-status-badge.attachmentpageattachment>*.success {
-	background-color: alpha(mix(@green_4, white, .8), .8);
+.preview_card_image:dir(rtl) {
+	border-radius: 0px 6px 6px 0px;
 }
 
-.ttl-status-badge>* {
-	padding: 1px 6px;
+.preview_card_video {
+	border-radius: 6px 6px 0px 0px;
 }
 
-.ttl-status-badge.sensitive-label {
-	padding: 10px 32px;
-	border-radius: 9999px;
+.preview_card:not(.explore), .preview_card:not(.explore) image:not(.attachment-overlay-icon) { /* In a status widget */
+	background-color: alpha(currentColor, 0.0625);
 }
 
-.ttl-status-badge>button>label {
-	padding: 1px 6px;
+.preview_card:not(.explore):hover {
+	background-color: alpha(currentColor, 0.125);
 }
 
-.ttl-status-badge>.image-button {
-	padding: 1px 6px;
+.preview_card:not(.explore):active {
+	background-color: alpha(currentColor, 0.1625);
 }
 
-.ttl-verified-field {
-	color: @success_color;
-	background: alpha(@success_bg_color, 0.1);
+/* Profile */
+.cover-badge {
+	padding: 6px 12px;
+	border-radius: 6px;
+	margin: 8px;
 }
 
-.media-viewer {
-	color: white;
+.cover-badge.only-icon {
+	padding: 6px;
 }
 
-.media-viewer .top-bar {
-	background-image: none;
+.large .header-image {
+	border-radius: 12px 12px 0 0;
 }
 
-.ttl-status-heading {
-	font-size: small;
+.ttl-profile-cover .header-image {
+	background: grey;
 }
 
-.ttl-status-heading-padding {
-	margin-top: -5px;
-	padding: 0 5px;
-	margin-left: -5px;
-	margin-right: -5px;
+.ttl-profile-cover avatar, .profile-editor avatar {
+	border: 6px solid @dialog_bg_color;
+	background: @dialog_bg_color;
 }
 
-.ttl-status-avatar-actor {
-	margin-top: -20px;
-	margin-left: -6px;
-	padding: 0;
-	background: none;
+.ttl-profile-stat-button,
+.small .ttl-profile-stat-button:first-child,
+.small .ttl-profile-stat-button:last-child {
+	border-radius: 0px;
+	padding: 8px 12px;
+	min-height: 32px;
 }
 
-.ttl-status-avatar-border {
-	border: 3px solid @popover_bg_color;
-	border-radius: 100%;
-	background-color: @popover_bg_color;
+.small .ttl-profile-cover>.content {
+	border-bottom-left-radius: 0px;
+	border-bottom-right-radius: 0px;
 }
 
-.card-spacing {
-	margin-top: 6px;
-	margin-bottom: 6px;
+.ttl-verified-field {
+	color: @success_color;
+	background: alpha(@success_bg_color, 0.1);
 }
 
-.ttl-post.direct {
-	background-color: alpha(@warning_bg_color, .1);
+.profile-role {
+	background-color: alpha(currentColor, .1);
+	padding: 4px 11px;
+	font-size: 12.2px;
+	font-weight: 500;
 }
 
-.ttl-post.direct:hover {
-	background-color: darker(alpha(@warning_bg_color, .1));
+.profile-role-border-radius {
+	border-radius: 9999px;
 }
 
-.ttl-post-actions {
-	margin-bottom: -12px;
+/* Profile editor */
+.profile-editor .background-none text {
+	background: none;
 }
 
-.ttl-quote {
-	border-radius: 6px;
-	font-weight: initial;
+.profile-editor .background-cover {
+	border-radius: 12px;
+	background-color: @shade_color;
 }
 
-.ttl-thread-line.top {
-	margin-top: -18px;
-	margin-bottom: -3px;
+/* Media Viewer */
+.media-viewer {
+	color: white;
 }
 
-.ttl-thread-line.bottom {
-	margin-bottom: -20px;
+.media-viewer .top-bar { /* devel style stays visible when swiping */
+	background-image: none;
 }
 
-.attachment-overlay-icon {
+.media-viewer-fab {
+	min-width: 42px;
+	min-height: 42px;
+}
+
+.circular-spinner {
 	border-radius: 100%;
-	min-height: 64px;
-	min-width: 64px;
+	padding: 3px;
 }
 
-.attachment-picture {
-	border-radius: 6px;
+video > overlay > revealer > controls { /* GtkVideo controls override */
+	padding: 12px;
 }
 
-.about .app-version{color:#fff;text-shadow:-1px -1px 0#000,1px -1px 0#000,-1px 1px 0#000,1px 1px 0#000;background:linear-gradient(150deg,#fdd81755 0,#66338b55 8.3%,#fff5 16.6%,#f4aec855 24.9%,#7bcce555 33.2%,#94551655 41.5%,#0005 49.8%,#e2201655 58.1%,#f2891755 66.4%,#efe52455 74.7%,#78b82a55 83%,#2c58a4 91.3%,#6d238055 100%);}
-.about .app-version:hover{background:radial-gradient(circle at 9.75% 50%,#0000 6.66%,#7902aa 6.7%,#0000 8.4%),conic-gradient(at 26.66% 50%,#0000 222.75deg,#ffd800 0 317.25deg,#0000 0),conic-gradient(at 33% 50%,#0000 222.75deg,white 0 317.25deg,#0000 0),conic-gradient(at 39% 50%,#0000 222.75deg,#ffa6b9 0 317.25deg,#0000 0),conic-gradient(at 45.66% 50%,#0000 222.75deg,#00d2ff 0 317.25deg,#0000 0),conic-gradient(at 52% 50%,#0000 222.75deg,#753000 0 317.25deg,#0000 0),conic-gradient(at 58.33% 50%,#0000 222.75deg,#000 0 317.25deg,#0000 0),linear-gradient(to bottom,#e40303,#e40303 16.67%,#ff8c00 16.67%,#ff8c00 33.33%,#ffed00 33.33%,#ffed00 50%,#008026 50%,#008026 66.67%,#004dff 66.67%,#004dff 83.33%,#750787 83.33%,#750787);}
+/* Lists */
+.ttl-box-no-shadow>revealer>box {
+	box-shadow: none;
+}
 
-/* Composer auto completion */
-GtkSourceAssistant.completion list row{
-	padding: 6px 12px 6px 12px;
+/* Status attachment */
+.attachment,
+.attachment button,
+flowboxchild {
+	padding: 0px;
+	margin: 0px;
 }
 
-.no-border-radius {
-	border-radius: 0px;
+.ttl-status-badge {
+	color: white;
+	border-radius: 6px;
+	margin: 8px;
 }
 
-.locale-dropdown-upcase {
-	text-transform: uppercase;
+.ttl-status-badge:not(.attachmentpageattachment) {
+	background-color: rgba(0, 0, 0, .8);
 }
 
-.preview_card {
-	padding: 0;
+.ttl-status-badge.attachmentpageattachment>*.error {
+	background-color: alpha(mix(@red_4, white, .8), .8);
 }
 
-.preview_card_image:dir(ltr) {
-	border-radius: 6px 0px 0px 6px;
+.ttl-status-badge.attachmentpageattachment>*.success {
+	background-color: alpha(mix(@green_4, white, .8), .8);
 }
 
-.preview_card_image:dir(rtl) {
-	border-radius: 0px 6px 6px 0px;
+.ttl-status-badge>* {
+	padding: 1px 6px;
 }
 
-.preview_card_video {
-	border-radius: 6px 6px 0px 0px;
+.ttl-status-badge.sensitive-label {
+	padding: 10px 32px;
+	border-radius: 9999px;
 }
 
-.bkwm-desc {
-	padding: 12px;
+.ttl-status-badge>button>label {
+	padding: 1px 6px;
 }
 
-video > overlay > revealer > controls {
-	padding: 12px;
+.ttl-status-badge>.image-button {
+	padding: 1px 6px;
+}
+
+.attachment-overlay-icon {
+	border-radius: 100%;
+	min-height: 64px;
+	min-width: 64px;
 }
 
 .spoilered-attachment {
 	filter: blur(30px);
 }
 
+/* Composer auto completion */
+GtkSourceAssistant.completion list row{
+	padding: 6px 12px 6px 12px;
+}
+
+/* Bookwyrm page */
+.bkwm-desc {
+	padding: 12px;
+}
+
+/* LabelWithWidgets */
 .lww-line-height {
 	line-height: 1.8;
 	margin-top: -5px;
 	margin-bottom: -5px;
 }
 
-.theme-disability.about .app-version{background:linear-gradient(45deg,#59595955 0,#59595955 37.5%,#cf728055 37.5%,#cf728055 42.5%,#eede7755 42.5%,#eede7755 47.5%,#e8e8e855 47.5%,#e8e8e855 52.5%,#7bc2e055 52.5%,#7bc2e055 57.5%,#3bb07d55 57.5%,#3bb07d55 62.5%,#59595955 62.5%,#59595955 100%);}
-.theme-disability.about .app-version:hover{background:linear-gradient(45deg,#595959 0,#595959 37.5%,#cf7280 37.5%,#cf7280 42.5%,#eede77 42.5%,#eede77 47.5%,#e8e8e8 47.5%,#e8e8e8 52.5%,#7bc2e0 52.5%,#7bc2e0 57.5%,#3bb07d 57.5%,#3bb07d 62.5%,#595959 62.5%,#595959 100%);}
-.theme-lesbian.about .app-version{background:linear-gradient(to bottom,#d1260155,#d1260155 20%,#ff8f4555 20%,#ff8f4555 40%,#fff5 40%,#fff5 60%,#cf559b55 60%,#cf559b55 80%,#9b1a5855 80%,#9b1a5855);}
-.theme-lesbian.about .app-version:hover{background:linear-gradient(to bottom,#d12601,#d12601 20%,#ff8f45 20%,#ff8f45 40%,#fff 40%,#fff 60%,#cf559b 60%,#cf559b 80%,#9b1a58 80%,#9b1a58);}
-.theme-pan.about .app-version{background:linear-gradient(to bottom,#ff218c55,#ff218c55 33.33%,#fed80055 33.33%,#fed80055 66.67%,#21b1ff55 66.67%,#21b1ff55);}
-.theme-pan.about .app-version:hover{background:linear-gradient(to bottom,#ff218c,#ff218c 33.33%,#fed800 33.33%,#fed800 66.67%,#21b1ff 66.67%,#21b1ff);}
-.theme-trans.about .app-version{background:linear-gradient(to bottom,#5ccefa55,#5ccefa55 20%,#f6a8b755 20%,#f6a8b755 40%,#fff5 40%,#fff5 60%,#f6a8b755 60%,#f6a8b755 80%,#5ccefa55 80%,#5ccefa55);}
-.theme-trans.about .app-version:hover{background:linear-gradient(to bottom,#5ccefa,#5ccefa 20%,#f6a8b7 20%,#f6a8b7 40%,#fff 40%,#fff 60%,#f6a8b7 60%,#f6a8b7 80%,#5ccefa 80%,#5ccefa);}
-.theme-bi.about .app-version{background:linear-gradient(to bottom,#d6027055,#d6027055 40%,#9a4f9655 40%,#9a4f9655 60%,#0039a955 60%,#0039a955);}
-.theme-bi.about .app-version:hover{background:linear-gradient(to bottom,#d60270,#d60270 40%,#9a4f96 40%,#9a4f96 60%,#0039a9 60%,#0039a9);}
-.theme-agender.about .app-version{background:linear-gradient(to bottom,#0005,#00000055 14.29%,#bcc4c755 14.29%,#bcc4c755 28.57%,#fff5 28.57%,#fff5 42.86%,#b7f58455 42.86%,#b7f58455 57.14%,#fff5 57.14%,#fff5 71.43%,#bcc4c755 71.43%,#bcc4c755 85.71%,#00000055 85.71%,#0005);}
-.theme-agender.about .app-version:hover{background:linear-gradient(to bottom,#000,#000 14.29%,#bcc4c7 14.29%,#bcc4c7 28.57%,#fff 28.57%,#fff 42.86%,#b7f584 42.86%,#b7f584 57.14%,#fff 57.14%,#fff 71.43%,#bcc4c7 71.43%,#bcc4c7 85.71%,#000 85.71%,#000);}
-.theme-aro.about .app-version{background:linear-gradient(to bottom,#309c3455,#309c3455 20%,#9dce6955 20%,#9dce6955 40%,#fff5 40%,#fff5 60%,#a0a0a055 60%,#a0a0a055 80%,#0005 80%,#0005);}
-.theme-aro.about .app-version:hover{background:linear-gradient(to bottom,#309c34,#309c34 20%,#9dce69 20%,#9dce69 40%,#fff 40%,#fff 60%,#a0a0a0 60%,#a0a0a0 80%,#000 80%,#000);}
-.theme-ace.about .app-version{background:linear-gradient(to bottom,#0005,#0005 25%,#a3a3a355 25%,#a3a3a355 50%,#fff5 50%,#fff5 75%,#82008055 75%,#82008055);}
-.theme-ace.about .app-version:hover{background:linear-gradient(to bottom,#000,#000 25%,#a3a3a3 25%,#a3a3a3 50%,#fff 50%,#fff 75%,#820080 75%,#820080);}
-.theme-non-binary.about .app-version{background:linear-gradient(to bottom,#fdf52f55,#fdf52f55 25%,#fff5 25%,#fff5 50%,#9d5ad255 50%,#9d5ad255 75%,#0005 75%,#0005);}
-.theme-non-binary.about .app-version:hover{background:linear-gradient(to bottom,#fdf52f,#fdf52f 25%,#fff 25%,#fff 50%,#9d5ad2 50%,#9d5ad2 75%,#000 75%,#000);}
-.theme-black-history.about .app-version{background:linear-gradient(to bottom,#e31b2355,#e31b2355 33%,#0005 33%,#0005 66%,#00853f55 66%,#00853f55);}
-.theme-black-history.about .app-version:hover{background:linear-gradient(to bottom,#e31b23,#e31b23 33%,#000 33%,#000 66%,#00853f 66%,#00853f);}
-.theme-aids.about .app-version{background:linear-gradient(to bottom,#ffffff55,#ffffff55 20%,#d1111355 20%,#d1111355 40%,#ffffff55 40%,#ffffff55 60%,#d1111355 60%,#d1111355 80%,#ffffff55 80%,#ffffff55);}
-.theme-aids.about .app-version:hover{background:linear-gradient(to bottom,#fff,#fff 20%,#d11113 20%,#d11113 40%,#fff 40%,#fff 60%,#d11113 60%,#d11113 80%,#fff 80%,#fff);}
-.theme-intersex.about .app-version{background:radial-gradient(closest-side circle at center,#ffd80055 44%,#7902aa55 44%,#7902aa55 56%,#ffd80055 56%);}
-.theme-intersex.about .app-version:hover{background:radial-gradient(closest-side circle at center,#ffd800 44%,#7902aa 44%,#7902aa 56%,#ffd800 56%);}
-.theme-autism.about .app-version{background:linear-gradient(to bottom,#e5304355,#e5304355 16.66%,#f6834755 16.66%,#f6834755 33.33%,#fac85755 33.33%,#fac85755 66.67%,#99d67155 66.67%,#99d67155 83.33%,#21ae7555 83.33%,#21ae7555);}
-.theme-autism.about .app-version:hover{background:linear-gradient(to bottom,#e53043,#e53043 16.66%,#f68347 16.66%,#f68347 33.33%,#fac857 33.33%,#fac857 66.67%,#99d671 66.67%,#99d671 83.33%,#21ae75 83.33%,#21ae75);}
-
-.lww-scale-emoji-hover .lww-emoji {
+.lww-scale-emoji-hover .lww-emoji { /* Zoom emojis on hover setting */
 	transition-duration: 150ms;
 }
 
@@ -389,6 +443,7 @@ video > overlay > revealer > controls {
 	transform: scale(2);
 }
 
+/* Polls */
 .ttl-poll-row:first-child{
 	border-top-left-radius: 12px;
 	border-top-right-radius: 12px;
@@ -399,37 +454,22 @@ video > overlay > revealer > controls {
 	border-bottom-right-radius: 12px;
 }
 
+/* Custom emoji picker */
 .picker-emoji-button {
 	padding: 5px;
 }
 
-.background-none {
-	background: none;
-}
-
-.profile-editor .background-none text {
-	background: none;
-}
-
-.profile-editor .background-cover {
-	border-radius: 12px;
-	background-color: @shade_color;
-}
-
-.media-viewer-fab {
-	min-width: 42px;
-	min-height: 42px;
-}
-
-.circular-spinner {
-	border-radius: 100%;
-	padding: 3px;
-}
-
+/* Announcements */
 .attention {
 	color: @yellow_4;
 }
 
+/* Timelines */
+.card-spacing {
+	margin-top: 6px;
+	margin-bottom: 6px;
+	background-color: @card_bg_color;
+}
 
 .ttl-view listview>row.activatable:selected:hover,
 .ttl-view listview>row.activatable:hover {
@@ -468,10 +508,6 @@ video > overlay > revealer > controls {
 	padding: 0px;
 }
 
-.card-spacing {
-	background-color: @card_bg_color;
-}
-
 /* .ttl-view:not(.no-transition) .large.content,
 .ttl-view:not(.no-transition) .small.content { */
 .ttl-view:not(.no-transition) .large.fake-content,
@@ -479,10 +515,6 @@ video > overlay > revealer > controls {
 	transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-.no-transition {
-	transition: none;
-}
-
 .ttl-view .large {
 	padding-left: 18px;
 	padding-right: 18px;
@@ -519,26 +551,27 @@ video > overlay > revealer > controls {
 	margin: 0px;
 }
 
-.compose-button {
-	padding: 8px;
-}
-
-.sidebar-item {
-	padding: 3px 14px;
-}
-
-.ttl-view .large.fake-content {
+.ttl-view .large.fake-content { /* TEMP: until ListView */
 	padding-left: 0;
 	padding-right: 0;
 	margin-left: 18px;
 	margin-right: 18px;
 }
 
-.ttl-separator {
-	background-color: transparent;
-	min-height: 8px;
+.compose-button {
+	padding: 8px;
 }
 
+.scroll-to-top-btn { /* Animate reveal */
+	transition-duration: 200ms;
+	transition-property: margin-bottom;
+}
+
+.scroll-to-top-btn.composer-btn-revealed {
+	margin-bottom: 56px;
+}
+
+/* Account switcher */
 .ttl-account-switcher {
 	padding: 0;
 }
@@ -562,7 +595,7 @@ video > overlay > revealer > controls {
 	margin: 3px 0px;
 }
 
-.ttl-account-switcher row:selected avatar {
+.ttl-account-switcher row:selected avatar { /* Only show the accent border when the row is selected */
 	border: 2px solid @accent_bg_color;
 }
 
@@ -575,38 +608,6 @@ video > overlay > revealer > controls {
 	opacity: 0;
 }
 
-.ttl-account-switcher row:selected .blue-checkmark {
+.ttl-account-switcher row:selected .blue-checkmark { /* Only show the checkmark when the row is selected */
 	opacity: 1;
 }
-
-.scroll-to-top-btn {
-	transition-duration: 200ms;
-	transition-property: margin-bottom;
-}
-
-.scroll-to-top-btn.composer-btn-revealed {
-	margin-bottom: 56px;
-}
-
-.profile-role {
-	background-color: alpha(currentColor, .1);
-	padding: 4px 11px;
-	font-size: 12.2px;
-	font-weight: 500;
-}
-
-.profile-role-border-radius {
-	border-radius: 9999px;
-}
-
-.preview_card:not(.explore), .preview_card:not(.explore) image:not(.attachment-overlay-icon) {
-	background-color: alpha(currentColor, 0.0625);
-}
-
-.preview_card:not(.explore):hover {
-	background-color: alpha(currentColor, 0.125);
-}
-
-.preview_card:not(.explore):active {
-	background-color: alpha(currentColor, 0.1625);
-}
diff --git a/data/ui/widgets/status.ui b/data/ui/widgets/status.ui
index d2d828997..2eb75a217 100644
--- a/data/ui/widgets/status.ui
+++ b/data/ui/widgets/status.ui
@@ -83,7 +83,6 @@
                 </child>
                 <style>
                   <class name="flat" />
-                  <class name="ttl-status-heading-padding" />
                   <class name="ttl-status-heading" />
                 </style>
               </object>