Change design of compose form in web UI (#28119)

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2024-01-25 16:41:31 +01:00 committed by GitHub
parent 42ab855b23
commit 6936e5aa69
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
71 changed files with 1574 additions and 1790 deletions

View file

@ -1,7 +1,6 @@
.emoji-mart {
font-size: 13px;
display: inline-block;
color: $inverted-text-color;
&,
* {
@ -15,13 +14,13 @@
}
.emoji-mart-bar {
border: 0 solid darken($ui-secondary-color, 8%);
border: 0 solid var(--dropdown-border-color);
&:first-child {
border-bottom-width: 1px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: $ui-secondary-color;
background: var(--dropdown-border-color);
}
&:last-child {
@ -36,7 +35,6 @@
display: flex;
justify-content: space-between;
padding: 0 6px;
color: $lighter-text-color;
line-height: 0;
}
@ -50,9 +48,10 @@
cursor: pointer;
background: transparent;
border: 0;
color: $darker-text-color;
&:hover {
color: darken($lighter-text-color, 4%);
color: lighten($darker-text-color, 4%);
}
}
@ -60,7 +59,7 @@
color: $highlight-text-color;
&:hover {
color: darken($highlight-text-color, 4%);
color: lighten($highlight-text-color, 4%);
}
.emoji-mart-anchor-bar {
@ -95,7 +94,7 @@
height: 270px;
max-height: 35vh;
padding: 0 6px 6px;
background: $simple-background-color;
background: var(--dropdown-background-color);
will-change: transform;
&::-webkit-scrollbar-track:hover,
@ -107,7 +106,7 @@
.emoji-mart-search {
padding: 10px;
padding-inline-end: 45px;
background: $simple-background-color;
background: var(--dropdown-background-color);
position: relative;
input {
@ -118,9 +117,9 @@
font-family: inherit;
display: block;
width: 100%;
background: rgba($ui-secondary-color, 0.3);
color: $inverted-text-color;
border: 1px solid $ui-secondary-color;
background: $ui-base-color;
color: $darker-text-color;
border: 1px solid lighten($ui-base-color, 8%);
border-radius: 4px;
&::-moz-focus-inner {
@ -155,11 +154,10 @@
&:disabled {
cursor: default;
pointer-events: none;
opacity: 0.3;
}
svg {
fill: $action-button-color;
fill: $darker-text-color;
}
}
@ -180,7 +178,7 @@
inset-inline-start: 0;
width: 100%;
height: 100%;
background-color: rgba($ui-secondary-color, 0.7);
background-color: var(--dropdown-border-color);
border-radius: 100%;
}
}
@ -197,7 +195,7 @@
width: 100%;
font-weight: 500;
padding: 5px 6px;
background: $simple-background-color;
background: var(--dropdown-background-color);
}
}
@ -241,7 +239,7 @@
.emoji-mart-no-results {
font-size: 14px;
color: $light-text-color;
color: $dark-text-color;
text-align: center;
padding: 5px 6px;
padding-top: 70px;