diff --git a/src/components/compose.css b/src/components/compose.css
index a56bc469..62469c83 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -31,6 +31,10 @@
max-height: 50vh;
resize: vertical;
line-height: 1.4;
+ border-color: transparent;
+}
+#compose-container textarea:hover {
+ border-color: var(--divider-color);
}
@media (min-width: 40em) {
@@ -51,7 +55,7 @@
}
}
#compose-container .status-preview {
- border-radius: 8px 8px 0 0;
+ border-radius: 16px 16px 0 0;
max-height: 160px;
background-color: var(--bg-color);
margin: 0 12px;
@@ -59,6 +63,7 @@
border-bottom: 0;
animation: appear-up 1s ease-in-out;
overflow: auto;
+ box-shadow: 0 -3px 12px -3px var(--drop-shadow-color);
}
#compose-container .status-preview :is(.hashtag, .time) {
/* Prevent hashtags from being clickable */
@@ -87,7 +92,7 @@
transparent,
var(--bg-faded-color)
); */
- border-top: 1px solid var(--outline-color);
+ border-top: var(--hairline-width) solid var(--outline-color);
backdrop-filter: blur(8px);
text-shadow: 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color),
0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color),
@@ -105,14 +110,17 @@
}
#compose-container form {
- border-radius: 8px;
+ border-radius: 16px;
padding: 4px 12px;
- background-image: linear-gradient(var(--bg-color) 75%, transparent);
+ background-color: var(--bg-blur-color);
+ /* background-image: linear-gradient(var(--bg-color) 85%, transparent); */
position: relative;
- z-index: 1;
+ z-index: 2;
+ --drop-shadow: 0 3px 6px -3px var(--drop-shadow-color);
+ box-shadow: var(--drop-shadow);
}
#compose-container .status-preview ~ form {
- box-shadow: 0 -12px 12px -12px var(--divider-color);
+ box-shadow: var(--drop-shadow), 0 -3px 6px -3px var(--drop-shadow-color);
}
#compose-container .toolbar {
@@ -131,8 +139,8 @@
}
#compose-container .toolbar-button {
display: inline-block;
- color: var(--text-color);
- background-color: var(--bg-faded-color);
+ color: var(--link-color);
+ background-color: var(--bg-blur-color);
padding: 0 8px;
border-radius: 8px;
min-height: 2.4em;
@@ -150,9 +158,10 @@
cursor: inherit;
outline: 0;
}
-#compose-container .toolbar-button:has([disabled]) {
+#compose-container .toolbar-button:has([disabled]),
+#compose-container .toolbar-button[disabled] {
pointer-events: none;
- background-color: var(--bg-faded-color);
+ background-color: transparent;
opacity: 0.5;
}
#compose-container
@@ -186,9 +195,14 @@
) {
cursor: pointer;
filter: none;
- border-color: var(--divider-color);
+ background-color: var(--bg-color);
+ border-color: var(--link-faded-color);
outline: 0;
}
+#compose-container .toolbar-button:not(:disabled).highlight {
+ border-color: var(--link-color);
+ box-shadow: inset 0 0 8px var(--link-faded-color);
+}
#compose-container .toolbar-button:not(:disabled):active {
filter: brightness(0.8);
}
@@ -430,6 +444,12 @@
}
}
+@media (min-width: 480px) {
+ #compose-container button[type='submit'] {
+ padding-inline: 24px;
+ }
+}
+
#media-sheet main {
padding-top: 8px;
display: flex;
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 96ab80da..d9fa4c6d 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -502,7 +502,7 @@ function Compose({
{currentAccountInfo?.avatarStatic && (
)}
@@ -831,7 +831,7 @@ function Compose({
}}
/>