diff --git a/src/app.css b/src/app.css
index ef2bb677..d256e2ec 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1804,7 +1804,7 @@ body > .szh-menu-container {
align-items: center;
line-height: 1.1;
padding: 8px 16px !important;
- transition: all 0.1s ease-in-out;
+ /* transition: all 0.1s ease-in-out; */
text-decoration: none;
white-space: nowrap;
overflow: hidden;
@@ -1851,6 +1851,7 @@ body > .szh-menu-container {
}
.szh-menu__divider {
background-color: var(--divider-color);
+ margin-block: 4px;
}
.szh-menu .szh-menu__item .menu-grow {
flex-grow: 1;
@@ -1927,6 +1928,52 @@ body > .szh-menu-container {
opacity: 1;
}
+.szh-menu {
+ .menu-control-group-horizontal {
+ display: grid;
+ /* auto columns */
+ grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
+
+ .szh-menu__item {
+ display: flex;
+ flex-direction: column;
+ padding: 8px !important;
+ gap: 2px;
+
+ .icon {
+ opacity: 1;
+
+ + span {
+ font-size: 80%;
+ /* line-height: 1.2; */
+ width: 100%;
+ text-align: center;
+ opacity: 0.5;
+ text-overflow: clip;
+ mask-image: linear-gradient(to left, transparent, black 16px);
+ }
+ }
+ }
+ }
+
+ .menu-control-group-horizontal:first-child,
+ li[aria-hidden='true'] + .menu-control-group-horizontal {
+ margin-top: -8px;
+ margin-bottom: -4px;
+
+ .szh-menu__item {
+ padding-block: 12px !important;
+ }
+
+ > [class^='szh-menu']:first-child {
+ border-top-left-radius: 8px;
+ }
+ > [class^='szh-menu']:last-child {
+ border-top-right-radius: 8px;
+ }
+ }
+}
+
.szh-menu
.szh-menu__item--type-checkbox:not(.szh-menu__item--disabled):not(
.szh-menu__item--hover
diff --git a/src/components/ICONS.jsx b/src/components/ICONS.jsx
index 265b3c7b..04afb189 100644
--- a/src/components/ICONS.jsx
+++ b/src/components/ICONS.jsx
@@ -100,4 +100,5 @@ export const ICONS = {
building: () => import('@iconify-icons/mingcute/building-5-line'),
history: () => import('@iconify-icons/mingcute/history-2-line'),
document: () => import('@iconify-icons/mingcute/document-line'),
+ 'arrows-right': () => import('@iconify-icons/mingcute/arrows-right-line'),
};
diff --git a/src/components/status.css b/src/components/status.css
index b93763a3..d2840ae1 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -1836,6 +1836,43 @@ a.card:is(:hover, :focus):visited {
animation: bookmarked 1s ease-in-out;
}
+/* STATUS MENU */
+
+.status-menu {
+ .szh-menu__item,
+ .szh-menu__submenu {
+ .icon + span {
+ transition: opacity 1s ease;
+ }
+ &.szh-menu__item--hover .icon + span {
+ opacity: 1;
+ }
+
+ &.checked {
+ &:not(.szh-menu__item--hover) {
+ color: var(--checked-color) !important;
+ }
+
+ .icon + span {
+ opacity: 1;
+ }
+
+ box-shadow: inset 0 -2px 0 var(--checked-color),
+ inset 0 -16px 8px -16px var(--checked-color);
+ }
+ }
+
+ .menu-reblog {
+ --checked-color: var(--reblog-color);
+ }
+ .menu-favourite.checked {
+ --checked-color: var(--favourite-color);
+ }
+ .menu-bookmark.checked {
+ --checked-color: var(--link-color);
+ }
+}
+
/* ENHANCED CONTENT */
.status .content pre {
diff --git a/src/components/status.jsx b/src/components/status.jsx
index b004831b..d94e29a0 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -682,82 +682,34 @@ function Status({
const actionsRef = useRef();
const StatusMenuItems = (
<>
- {!isSizeLarge && (
+ {isSizeLarge && (
<>
-
- {createdDateText}
-