From 1e4bf4d0f1864e8258f063013aa9819350f38748 Mon Sep 17 00:00:00 2001
From: Evangelos Paterakis <evan@geopjr.dev>
Date: Thu, 14 Mar 2024 18:57:15 +0200
Subject: [PATCH] feat(style): organize and cleanup

---
 data/gtk/dropdown/expiration_title.ui |   2 +-
 data/gtk/dropdown/language_title.ui   |   2 +-
 data/style.css                        | 769 +++++++++++++-------------
 data/ui/widgets/profile.ui            |   2 +-
 data/ui/widgets/status.ui             |   2 +-
 src/Views/TabbedBase.vala             |   6 -
 src/Widgets/ProfileCover.vala         |   3 +-
 7 files changed, 379 insertions(+), 407 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 d4761799d..5e2b79f83 100644
--- a/data/style.css
+++ b/data/style.css
@@ -1,15 +1,27 @@
-.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;
+/* Animations */
+@keyframes rotate {
+	from { -gtk-icon-transform: rotate(-72deg); }
+	to {}
 }
 
-.ttl-sidebar .badge.no-attention {
-	background: alpha(@sidebar_fg_color, .4);
+@keyframes bounce {
+	0% { -gtk-icon-transform: translateY(-3px); }
+	50% { -gtk-icon-transform: translateY(3px); }
+	100% {}
+}
+
+@keyframes rotate_half {
+	from { -gtk-icon-transform: rotate(-180deg); }
+	to {}
+}
+
+/* Utils */
+.uppercase {
+	text-transform: uppercase;
+}
+
+.no-border-radius {
+	border-radius: 0px;
 }
 
 .font-bold {
@@ -20,25 +32,20 @@
 	box-shadow: none;
 }
 
-headerbar.flat.no-title .title {
-	opacity: 0;
+.italic {
+	font-style: italic;
 }
 
-.attachment,
-.attachment button,
-flowboxchild {
-	padding: 0px;
-	margin: 0px;
+.monospace {
+	font-family: monospace;
 }
 
-.cover-badge {
-	padding: 6px 12px;
-	border-radius: 6px;
-	margin: 8px;
+.background-none {
+	background: none;
 }
 
-.cover-badge.only-icon {
-	padding: 6px;
+.font-small {
+	font-size: small;
 }
 
 .ttl-flat-button {
@@ -46,205 +53,280 @@ flowboxchild {
 	margin: 0px;
 }
 
-.ttl-thread-line {
-	background: @theme_fg_color;
-	opacity: .1;
+.ttl-box-no-shadow>revealer>box {
+	box-shadow: none;
 }
 
-.ttl-code {
+/* Overrides */
+video > overlay > revealer > controls {
 	padding: 12px;
-	background: rgba(150, 150, 150, .1);
+}
+
+GtkSourceAssistant {
+	background: @popover_bg_color;
+	padding: 8px;
+	/* border-radius of child + padding */
+	border-radius: 14px;
+
+}
+
+GtkSourceAssistant scrolledwindow undershoot {
+	background-image: none;
+	box-shadow: none;
+}
+
+GtkSourceAssistant scrolledwindow .cell.icon {
+	padding-left: 0;
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
+GtkSourceAssistant row {
 	border-radius: 6px;
+	margin: 6px 0;
+	padding: 6px;
 }
 
-.italic {
-	font-style: italic;
+GtkSourceAssistant row:selected {
+	background: alpha(@accent_bg_color, .33);
+	color: currentColor;
 }
 
-.monospace {
-	font-family: monospace;
+GtkSourceAssistant row:first-child,
+GtkSourceAssistant row:last-child {
+	margin: 0;
 }
 
-.ttl-label-emoji-no-click:hover {
-	background: transparent;
+GtkSourceAssistant.completion list row{
+	padding: 6px 12px 6px 12px;
 }
 
-.ttl-label-emoji-no-click {
+.sourceview.reset {
 	background: transparent;
-	padding: 0;
+	color: currentColor;
 }
 
-.ttl-name-button {
-	padding: 0 5px;
-	margin-left: -5px;
-	margin-right: -5px;
-}
+/* About */
+.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);}
 
-/*
-	Profile
-*/
+/* Larger Font Size Options */
+.ttl-status-font-large {
+	font-size: larger;
+}
 
-.ttl-profile-cover .header-image {
-	background: grey;
+.ttl-status-font-large > .ttl-large-body {
+	font-size: larger;
 }
 
-.ttl-profile-cover avatar, .profile-editor avatar {
-	border: 6px solid @dialog_bg_color;
-	background: @dialog_bg_color;
+.ttl-large-body {
+	font-size: larger;
 }
 
-.large .header-image {
-	border-radius: 12px 12px 0 0;
+.ttl-status-line-height-large {
+	line-height: 1.4;
 }
 
-/* Status action icons */
-@keyframes rotate_star {
-	from { -gtk-icon-transform: rotate(-72deg); }
-	to {}
+/* Media Viewer */
+.media-viewer {
+	color: white;
 }
 
-@keyframes bounce {
-	0% { -gtk-icon-transform: translateY(-3px); }
-	50% { -gtk-icon-transform: translateY(3px); }
-	100% {}
+.media-viewer .top-bar { /* Devel Background */
+	background-image: none;
 }
 
-@keyframes rotate_half {
-	from { -gtk-icon-transform: rotate(-180deg); }
-	to {}
+.media-viewer-fab {
+	min-width: 42px;
+	min-height: 42px;
 }
 
-.ttl-status-action-reblog.enabled image {
-	animation: rotate_half 0.4s ease;
+.circular-spinner {
+	border-radius: 100%;
+	padding: 3px;
 }
 
-.ttl-status-action-bookmark.enabled image {
-	animation: bounce 0.4s ease;
+/* Bookwyrm */
+.bkwm-desc {
+	padding: 12px;
 }
 
-.ttl-status-action-star.enabled image {
-	animation: rotate_star 0.4s ease;
+/* Label With Widgets */
+.lww-scale-emoji-hover .lww-emoji {
+	transition-duration: 150ms;
 }
 
-.ttl-status-action-star:hover,
-.ttl-status-action-star.enabled {
-	color: @yellow_5;
+.lww-scale-emoji-hover .lww-emoji:hover {
+	transform: scale(2);
 }
 
-.ttl-status-action-star:active {
-	color: @yellow_4;
+/* Timeline */
+.ttl-view listview>row.activatable:selected:hover,
+.ttl-view listview>row.activatable:hover {
+	background-color:transparent;
 }
 
-.ttl-status-action-reblog:hover,
-.ttl-status-action-reblog.enabled {
-	color: @purple_3;
+.ttl-view listview>row.activatable:selected:active,
+.ttl-view listview>row.activatable:active {
+	box-shadow: none;
 }
 
-.ttl-status-action-reblog:active {
-	color: @purple_4;
+/* .ttl-view .small.content .card:first-child { */
+.ttl-view .small.fake-content .card:first-child {
+	border-top: 1px @borders solid;
 }
 
-.ttl-status-action-reply:hover,
-.ttl-status-action-reply.enabled {
-	color: @green_3;
+/* .ttl-view .small.content .card { */
+.ttl-view .small.fake-content .card {
+	box-shadow: none;
+}
+.ttl-view .small .preview_card.explore .preview_card_image {
+	border-radius: 0px;
 }
 
-.ttl-status-action-reply:active {
-	color: @green_4;
+/* .ttl-view .small.content .card.card-spacing { */
+.ttl-view .small.fake-content .card.card-spacing {
+	margin: 0px;
 }
 
-.ttl-status-action-bookmark:hover,
-.ttl-status-action-bookmark.enabled {
-	color: @red_3;
+/* .ttl-view .content row:first-child { */
+.ttl-view .fake-content row:first-child {
+	margin-top: 0px;
 }
 
-.ttl-status-action-bookmark:active {
-	color: @red_4;
+/* .ttl-view .content row:last-child { */
+.ttl-view .fake-content row:last-child {
+	margin-bottom: 0px;
 }
 
-.ttl-profile-stat-button,
-.small .ttl-profile-stat-button:first-child,
-.small .ttl-profile-stat-button:last-child {
+/* .ttl-view .small.content .card { */
+.ttl-view .small.fake-content .card {
+	border-left: none;
+	border-right: none;
 	border-radius: 0px;
-	padding: 8px 12px;
-	min-height: 32px;
 }
 
-.small .ttl-profile-cover>.content {
-	border-bottom-left-radius: 0px;
-	border-bottom-right-radius: 0px;
+/* .ttl-view .small.content { */
+.ttl-view .small.fake-content {
+	padding: 0px;
 }
 
-.ttl-box-no-shadow>revealer>box {
-	box-shadow: none;
+/* .ttl-view .content row:not(.ttl-post) { */
+.ttl-view .fake-content row:not(.ttl-post) {
+	padding: 0px;
 }
 
-.ttl-status-font-large {
-	font-size: larger;
+/* .ttl-view .small.content .card { */
+.ttl-view .small.fake-content .card {
+	border-bottom: 1px @borders solid;
 }
 
-.ttl-status-font-large > .ttl-large-body {
-	font-size: larger;
+.card-spacing {
+	background-color: @card_bg_color;
+	margin-top: 6px;
+	margin-bottom: 6px;
 }
 
-.ttl-large-body {
-	font-size: larger;
+.ttl-view .large {
+	padding-left: 18px;
+	padding-right: 18px;
 }
 
-.ttl-status-line-height-large {
-	line-height: 1.4;
+.ttl-view .large:first-child {
+	padding-top: 32px;
 }
 
-.ttl-status-badge {
-	color: white;
-	border-radius: 6px;
-	margin: 8px;
+.ttl-view .large:last-child {
+	padding-bottom: 32px;
 }
 
-.ttl-status-badge:not(.attachmentpageattachment) {
-	background-color: rgba(0, 0, 0, .8);
+.ttl-view .large.fake-content {
+	padding-left: 0;
+	padding-right: 0;
+	margin-left: 18px;
+	margin-right: 18px;
 }
 
-.ttl-status-badge.attachmentpageattachment>*.error {
-	background-color: alpha(mix(@red_4, white, .8), .8);
+.scroll-to-top-btn {
+	transition-duration: 200ms;
+	transition-property: margin-bottom;
 }
 
-.ttl-status-badge.attachmentpageattachment>*.success {
-	background-color: alpha(mix(@green_4, white, .8), .8);
+.filter {
+	margin: -2px;
+	border-radius: 0;
 }
 
-.ttl-status-badge>* {
-	padding: 1px 6px;
+/* Home */
+.compose-button {
+	padding: 8px;
 }
 
-.ttl-status-badge.sensitive-label {
-	padding: 10px 32px;
-	border-radius: 9999px;
+.scroll-to-top-btn.composer-btn-revealed {
+	margin-bottom: 56px;
 }
 
-.ttl-status-badge>button>label {
-	padding: 1px 6px;
+/* Sidebar */
+.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;
 }
 
-.ttl-status-badge>.image-button {
-	padding: 1px 6px;
+.ttl-sidebar .badge.no-attention {
+	background: alpha(@sidebar_fg_color, .4);
 }
 
-.ttl-verified-field {
-	color: @success_color;
-	background: alpha(@success_bg_color, 0.1);
+.sidebar-item {
+	padding: 3px 14px;
 }
 
-.media-viewer {
-	color: white;
+.ttl-separator {
+	background-color: transparent;
+	min-height: 8px;
 }
 
-.media-viewer .top-bar {
-	background-image: none;
+/* Status */
+.ttl-name-button {
+	padding: 0 5px;
+	margin-left: -5px;
+	margin-right: -5px;
 }
 
-.ttl-status-heading {
-	font-size: small;
+.ttl-code {
+	padding: 12px;
+	background: rgba(150, 150, 150, .1);
+	border-radius: 6px;
 }
 
 .ttl-status-heading-padding {
@@ -267,11 +349,6 @@ flowboxchild {
 	background-color: @popover_bg_color;
 }
 
-.card-spacing {
-	margin-top: 6px;
-	margin-bottom: 6px;
-}
-
 .ttl-post.direct {
 	background-color: alpha(@warning_bg_color, .1);
 }
@@ -284,312 +361,216 @@ flowboxchild {
 	margin-bottom: -12px;
 }
 
-.ttl-quote {
-	border-radius: 6px;
-	font-weight: initial;
-}
-
-.ttl-thread-line.top {
-	margin-top: -18px;
-	margin-bottom: -3px;
-}
-
-.ttl-thread-line.bottom {
-	margin-bottom: -20px;
-}
-
-.attachment-overlay-icon {
-	border-radius: 100%;
-	min-height: 64px;
-	min-width: 64px;
+.attention {
+	color: @yellow_4;
 }
 
-.attachment-picture {
+.ttl-quote {
 	border-radius: 6px;
+	font-weight: initial;
 }
 
-.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);}
-
-/* Composer auto completion */
-GtkSourceAssistant.completion list row{
-	padding: 6px 12px 6px 12px;
-}
-
-.no-border-radius {
-	border-radius: 0px;
-}
-
-.locale-dropdown-upcase {
-	text-transform: uppercase;
-}
-
-.preview_card {
-	padding: 0;
-}
-
-.preview_card_image:dir(ltr) {
-	border-radius: 6px 0px 0px 6px;
-}
-
-.preview_card_image:dir(rtl) {
-	border-radius: 0px 6px 6px 0px;
-}
-
-.preview_card_video {
-	border-radius: 6px 6px 0px 0px;
-}
-
-.bkwm-desc {
-	padding: 12px;
-}
-
-video > overlay > revealer > controls {
-	padding: 12px;
-}
-
-.spoilered-attachment {
-	filter: blur(30px);
-}
-
-.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 {
-	transition-duration: 150ms;
+/* Status Actions */
+.ttl-status-action-reblog.enabled image {
+	animation: rotate_half 0.4s ease;
 }
 
-.lww-scale-emoji-hover .lww-emoji:hover {
-	transform: scale(2);
+.ttl-status-action-bookmark.enabled image {
+	animation: bounce 0.4s ease;
 }
 
-.ttl-poll-row:first-child{
-	border-top-left-radius: 12px;
-	border-top-right-radius: 12px;
+.ttl-status-action-star.enabled image {
+	animation: rotate 0.4s ease;
 }
 
-.ttl-poll-row:last-child{
-	border-bottom-left-radius: 12px;
-	border-bottom-right-radius: 12px;
+.ttl-status-action-star:hover,
+.ttl-status-action-star.enabled {
+	color: @yellow_5;
 }
 
-.picker-emoji-button {
-	padding: 5px;
+.ttl-status-action-star:active {
+	color: @yellow_4;
 }
 
-.background-none {
-	background: none;
+.ttl-status-action-reblog:hover,
+.ttl-status-action-reblog.enabled {
+	color: @purple_3;
 }
 
-.profile-editor .background-none text {
-	background: none;
+.ttl-status-action-reblog:active {
+	color: @purple_4;
 }
 
-.profile-editor .background-cover {
-	border-radius: 12px;
-	background-color: @shade_color;
+.ttl-status-action-reply:hover,
+.ttl-status-action-reply.enabled {
+	color: @green_3;
 }
 
-.media-viewer-fab {
-	min-width: 42px;
-	min-height: 42px;
+.ttl-status-action-reply:active {
+	color: @green_4;
 }
 
-.circular-spinner {
-	border-radius: 100%;
-	padding: 3px;
+.ttl-status-action-bookmark:hover,
+.ttl-status-action-bookmark.enabled {
+	color: @red_3;
 }
 
-.attention {
-	color: @yellow_4;
+.ttl-status-action-bookmark:active {
+	color: @red_4;
 }
 
-
-.ttl-view listview>row.activatable:selected:hover,
-.ttl-view listview>row.activatable:hover {
-	background-color:transparent;
+/* Status Polls */
+.ttl-poll-row:first-child{
+	border-top-left-radius: 12px;
+	border-top-right-radius: 12px;
 }
 
-.ttl-view listview>row.activatable:selected:active,
-.ttl-view listview>row.activatable:active {
-	box-shadow: none;
+.ttl-poll-row:last-child{
+	border-bottom-left-radius: 12px;
+	border-bottom-right-radius: 12px;
 }
 
-/* .ttl-view .content row:first-child { */
-.ttl-view .fake-content row:first-child {
-	margin-top: 0px;
+/* Status Thread Line */
+.ttl-thread-line {
+	background: @theme_fg_color;
+	opacity: .1;
 }
 
-/* .ttl-view .content row:last-child { */
-.ttl-view .fake-content row:last-child {
-	margin-bottom: 0px;
+.ttl-thread-line.top {
+	margin-top: -18px;
+	margin-bottom: -3px;
 }
 
-/* .ttl-view .small.content .card { */
-.ttl-view .small.fake-content .card {
-	border-left: none;
-	border-right: none;
-	border-radius: 0px;
+.ttl-thread-line.bottom {
+	margin-bottom: -20px;
 }
 
-/* .ttl-view .small.content { */
-.ttl-view .small.fake-content {
+/* Status Attachments */
+.attachment,
+.attachment button,
+flowboxchild {
 	padding: 0px;
+	margin: 0px;
 }
 
-/* .ttl-view .content row:not(.ttl-post) { */
-.ttl-view .fake-content row:not(.ttl-post) {
-	padding: 0px;
+.attachment-overlay-icon {
+	border-radius: 100%;
+	min-height: 64px;
+	min-width: 64px;
 }
 
-.card-spacing {
-	background-color: @card_bg_color;
+.attachment-picture {
+	border-radius: 6px;
 }
 
-/* .ttl-view:not(.no-transition) .large.content,
-.ttl-view:not(.no-transition) .small.content { */
-.ttl-view:not(.no-transition) .large.fake-content,
-.ttl-view:not(.no-transition) .small.fake-content {
-	transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+.spoilered-attachment {
+	filter: blur(30px);
 }
 
-.no-transition {
-	transition: none;
+.ttl-status-badge {
+	color: white;
+	border-radius: 6px;
+	margin: 8px;
 }
 
-.ttl-view .large {
-	padding-left: 18px;
-	padding-right: 18px;
+.ttl-status-badge:not(.attachmentpageattachment) {
+	background-color: rgba(0, 0, 0, .8);
 }
 
-.ttl-view .large:first-child {
-	padding-top: 32px;
+.ttl-status-badge.attachmentpageattachment>*.error {
+	background-color: alpha(mix(@red_4, white, .8), .8);
 }
 
-.ttl-view .large:last-child {
-	padding-bottom: 32px;
+.ttl-status-badge.attachmentpageattachment>*.success {
+	background-color: alpha(mix(@green_4, white, .8), .8);
 }
 
-/* .ttl-view .small.content .card { */
-.ttl-view .small.fake-content .card {
-	border-bottom: 1px @borders solid;
+.ttl-status-badge>* {
+	padding: 1px 6px;
 }
 
-/* .ttl-view .small.content .card:first-child { */
-.ttl-view .small.fake-content .card:first-child {
-	border-top: 1px @borders solid;
+.ttl-status-badge.sensitive-label {
+	padding: 10px 32px;
+	border-radius: 9999px;
 }
 
-/* .ttl-view .small.content .card { */
-.ttl-view .small.fake-content .card {
-	box-shadow: none;
+.ttl-status-badge>button>label {
+	padding: 1px 6px;
 }
-.ttl-view .small .preview_card.explore .preview_card_image {
-	border-radius: 0px;
+
+.ttl-status-badge>.image-button {
+	padding: 1px 6px;
 }
 
-/* .ttl-view .small.content .card.card-spacing { */
-.ttl-view .small.fake-content .card.card-spacing {
-	margin: 0px;
+/* Preview Cards */
+.preview_card {
+	padding: 0;
 }
 
-.compose-button {
-	padding: 8px;
+.preview_card_image:dir(ltr) {
+	border-radius: 6px 0px 0px 6px;
 }
 
-.sidebar-item {
-	padding: 3px 14px;
+.preview_card_image:dir(rtl) {
+	border-radius: 0px 6px 6px 0px;
 }
 
-.ttl-view .large.fake-content {
-	padding-left: 0;
-	padding-right: 0;
-	margin-left: 18px;
-	margin-right: 18px;
+.preview_card_video {
+	border-radius: 6px 6px 0px 0px;
 }
 
-.ttl-separator {
-	background-color: transparent;
-	min-height: 8px;
+.preview_card:not(.explore),
+.preview_card:not(.explore) image:not(.attachment-overlay-icon) {
+	background-color: alpha(currentColor, 0.0625);
 }
 
-.ttl-account-switcher {
-	padding: 0;
+.preview_card:not(.explore):hover {
+	background-color: alpha(currentColor, 0.125);
 }
 
-.ttl-account-switcher row {
-	border-radius: 10px;
-	margin: 3px 0px;
-	padding-right: 0px;
-	padding-left: 0px;
+.preview_card:not(.explore):active {
+	background-color: alpha(currentColor, 0.1625);
 }
 
-.ttl-account-switcher row:first-child {
-	margin-top: 0px;
+/* Profile */
+.ttl-profile-cover .header-image {
+	background: grey;
 }
 
-.ttl-account-switcher .new-account {
-	margin-bottom: 0px;
+.ttl-profile-cover avatar, .profile-editor avatar {
+	border: 6px solid @dialog_bg_color;
+	background: @dialog_bg_color;
 }
 
-.ttl-account-switcher separator {
-	margin: 3px 0px;
+.large .header-image {
+	border-radius: 12px 12px 0 0;
 }
 
-.ttl-account-switcher row:selected avatar {
-	border: 2px solid @accent_bg_color;
+.cover-badge {
+	padding: 6px 12px;
+	border-radius: 6px;
+	margin: 8px;
 }
 
-.ttl-account-switcher .blue-checkmark {
-	color: @light_1;
-	border-radius: 9999px;
-	border: solid @accent_bg_color 2px;
-	background-color: @accent_bg_color;
-	margin-bottom: 6px;
-	opacity: 0;
+.cover-badge.only-icon {
+	padding: 6px;
 }
 
-.ttl-account-switcher row:selected .blue-checkmark {
-	opacity: 1;
+.ttl-profile-stat-button,
+.small .ttl-profile-stat-button:first-child,
+.small .ttl-profile-stat-button:last-child {
+	border-radius: 0px;
+	padding: 8px 12px;
 }
 
-.scroll-to-top-btn {
-	transition-duration: 200ms;
-	transition-property: margin-bottom;
+.small .ttl-profile-cover>.content {
+	border-bottom-left-radius: 0px;
+	border-bottom-right-radius: 0px;
 }
 
-.scroll-to-top-btn.composer-btn-revealed {
-	margin-bottom: 56px;
+.ttl-verified-field {
+	color: @success_color;
+	background: alpha(@success_bg_color, 0.1);
 }
 
 .profile-role {
@@ -603,67 +584,63 @@ video > overlay > revealer > controls {
 	border-radius: 9999px;
 }
 
-.preview_card:not(.explore), .preview_card:not(.explore) image:not(.attachment-overlay-icon) {
-	background-color: alpha(currentColor, 0.0625);
+.account-avatar {
+	margin-top: -30px;
 }
 
-.preview_card:not(.explore):hover {
-	background-color: alpha(currentColor, 0.125);
+/* Profile Editor */
+.profile-editor .background-none text {
+	background: none;
 }
 
-.preview_card:not(.explore):active {
-	background-color: alpha(currentColor, 0.1625);
+.profile-editor .background-cover {
+	border-radius: 12px;
+	background-color: @shade_color;
 }
 
-GtkSourceAssistant {
-	background: @popover_bg_color;
-	padding: 8px;
-	/* border-radius of child + padding */
-	border-radius: 14px;
-
+/* Custom Emoji Chooser */
+.picker-emoji-button {
+	padding: 5px;
 }
 
-GtkSourceAssistant scrolledwindow undershoot {
-	background-image: none;
-	box-shadow: none;
+/* Account Switcher */
+.ttl-account-switcher {
+	padding: 0;
 }
 
-GtkSourceAssistant scrolledwindow .cell.icon {
-	padding-left: 0;
-	padding-top: 0;
-	padding-bottom: 0;
+.ttl-account-switcher row {
+	border-radius: 10px;
+	margin: 3px 0px;
+	padding-right: 0px;
+	padding-left: 0px;
 }
 
-GtkSourceAssistant row {
-	border-radius: 6px;
-	margin: 6px 0;
-	padding: 6px;
+.ttl-account-switcher row:first-child {
+	margin-top: 0px;
 }
 
-GtkSourceAssistant row:selected {
-	background: alpha(@accent_bg_color, .33);
-	color: currentColor;
+.ttl-account-switcher .new-account {
+	margin-bottom: 0px;
 }
 
-GtkSourceAssistant row:first-child,
-GtkSourceAssistant row:last-child {
-	margin: 0;
+.ttl-account-switcher separator {
+	margin: 3px 0px;
 }
 
-.account-avatar {
-	margin-top: -30px;
+.ttl-account-switcher row:selected avatar {
+	border: 2px solid @accent_bg_color;
 }
 
-.account-stats {
-	font-size: small;
+.ttl-account-switcher .blue-checkmark {
+	color: @light_1;
+	border-radius: 9999px;
+	border: solid @accent_bg_color 2px;
+	background-color: @accent_bg_color;
+	margin-bottom: 6px;
+	opacity: 0;
 }
 
-.filter {
-	margin: -2px;
-	border-radius: 0;
+.ttl-account-switcher row:selected .blue-checkmark {
+	opacity: 1;
 }
 
-.sourceview.reset {
-	background: transparent;
-	color: currentColor;
-}
diff --git a/data/ui/widgets/profile.ui b/data/ui/widgets/profile.ui
index 92586c409..322a72dc4 100644
--- a/data/ui/widgets/profile.ui
+++ b/data/ui/widgets/profile.ui
@@ -94,7 +94,7 @@
 						<property name="wrap-mode">word</property>
 						<property name="xalign">0</property>
 						<style>
-							<class name="account-stats" />
+							<class name="font-small" />
 						</style>
 						<layout>
 							<property name="column">0</property>
diff --git a/data/ui/widgets/status.ui b/data/ui/widgets/status.ui
index 44b47940f..36d33b385 100644
--- a/data/ui/widgets/status.ui
+++ b/data/ui/widgets/status.ui
@@ -93,7 +93,7 @@
                         <style>
                           <class name="flat" />
                           <class name="ttl-status-heading-padding" />
-                          <class name="ttl-status-heading" />
+                          <class name="font-small" />
                         </style>
                       </object>
                     </child>
diff --git a/src/Views/TabbedBase.vala b/src/Views/TabbedBase.vala
index 14214a2b6..8e2db7d9c 100644
--- a/src/Views/TabbedBase.vala
+++ b/src/Views/TabbedBase.vala
@@ -83,7 +83,6 @@ public class Tuba.Views.TabbedBase : Views.Base {
 
 	public void add_tab (Views.Base view) {
 		id_counter++;
-		view.content_box.add_css_class ("no-transition");
 		views += view;
 		var page = stack.add_titled (view, id_counter.to_string (), view.label);
 		view.bind_property ("icon", page, "icon-name", BindingFlags.SYNC_CREATE);
@@ -164,11 +163,6 @@ public class Tuba.Views.TabbedBase : Views.Base {
 
 	protected virtual void on_view_switched () {
 		var view = stack.visible_child as Views.Base;
-		if (view.content_box.has_css_class ("no-transition")) {
-			Timeout.add_once (200, () => {
-				last_view.content_box.remove_css_class ("no-transition");
-			});
-		}
 
 		if (last_view != null) {
 			last_view.current = false;
diff --git a/src/Widgets/ProfileCover.vala b/src/Widgets/ProfileCover.vala
index 665d00212..e0034af45 100644
--- a/src/Widgets/ProfileCover.vala
+++ b/src/Widgets/ProfileCover.vala
@@ -217,7 +217,8 @@ protected class Tuba.Widgets.Cover : Gtk.Box {
 	protected Gtk.Button build_profile_stats_button (string btn_label) {
 		var btn = new Gtk.Button.with_label (btn_label) {
 			css_classes = { "flat", "ttl-profile-stat-button" },
-			hexpand = true
+			hexpand = true,
+            height_request = 32
 		};
 
 		var child_label = btn.child as Gtk.Label;