mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-24 18:25:41 +03:00
Code Issues Projects Releases Packages Wiki Activity

Make textarea wider for small viewport

Browse source
This commit is contained in:
Lim Chee Aun 2023-11-04 11:46:32 +08:00
parent 21007e0a4d
commit 44ffd69941
1 changed files with 34 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/components/compose.css
View file

@ -40,28 +40,6 @@
border-radius: 9999px;
}
#compose-container textarea {
width: 100%;
max-width: 100%;
height: 5em;
min-height: 5em;
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) {
#compose-container textarea {
/* font-size: 150%;
font-size: calc(100% + 50% / var(--text-weight)); */
max-height: 65vh;
}
}
@keyframes appear-up {
0% {
opacity: 0;
@ -129,19 +107,51 @@
}
#compose-container form {
border-radius: 16px;
padding: 4px 12px;
--form-padding-inline: 12px;
--form-padding-block: 8px;
/* border-radius: 16px; */
padding: var(--form-padding-block) var(--form-padding-inline);
background-color: var(--bg-blur-color);
/* background-image: linear-gradient(var(--bg-color) 85%, transparent); */
position: relative;
z-index: 2;
--drop-shadow: 0 3px 6px -3px var(--drop-shadow-color);
box-shadow: var(--drop-shadow);
@media (min-width: 40em) {
border-radius: 16px;
}
}
#compose-container .status-preview ~ form {
box-shadow: var(--drop-shadow), 0 -3px 6px -3px var(--drop-shadow-color);
}
#compose-container textarea {
width: 100%;
max-width: 100%;
height: 5em;
min-height: 5em;
max-height: 50vh;
resize: vertical;
line-height: 1.4;
border-color: transparent;
@media (width < 30em) {
margin-inline: calc(-1 * var(--form-padding-inline));
width: 100vw !important;
max-width: 100vw;
border-radius: 0;
border: 0;
}
@media (min-width: 40em) {
max-height: 65vh;
}
}
#compose-container textarea:hover {
border-color: var(--divider-color);
}
#compose-container .toolbar {
display: flex;
justify-content: space-between;