sjw/pleroma-fe
1
0
Fork 0
mirror of https://git.pleroma.social/sjw/pleroma-fe.git synced 2024-12-23 00:09:42 +01:00
Code Issues Releases Wiki Activity

Made the packs scroller a lot more bearable

Browse Source
This commit is contained in:
Henry Jameson 2024-06-26 00:02:45 +03:00
parent 8981448448
commit 1e0d75782f
1 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/emoji_picker/emoji_picker.scss
View File

@ -1,4 +1,6 @@
.emoji-picker {
--__emoji-picker-header: 2.2em;
width: 25em;
max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
display: flex;
@ -8,17 +10,19 @@
display: inline-flex;
justify-content: center;
align-items: center;
width: var(--emoji-size);
max-width: var(--emoji-size);
height: var(--emoji-size);
max-height: var(--emoji-size);
width: var(--__emoji-picker-header);
max-width: var(--__emoji-picker-header);
height: var(--__emoji-picker-header);
max-height: var(--__emoji-picker-header);
.still-image {
max-width: 100%;
max-height: 100%;
height: 100%;
width: 100%;
width: var(--__emoji-picker-header);
max-width: var(--__emoji-picker-header);
height: var(--__emoji-picker-header);
max-height: var(--__emoji-picker-header);
object-fit: contain;
--_still_image-label-scale: 0.5;
}
}
@ -45,7 +49,7 @@
.heading {
display: flex;
padding: 10px 0.5em 0.3em;
padding: 0.7em 0.5em 0;
}
.content {
@ -60,6 +64,7 @@
display: flex;
flex-flow: row nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.additional-tabs {
@ -75,18 +80,22 @@
flex-basis: auto;
display: flex;
align-content: center;
scrollbar-width: thin;
&-item {
padding: 0 0.5em;
cursor: pointer;
font-size: 1.85em;
width: var(--emoji-size);
max-width: var(--emoji-size);
height: var(--emoji-size);
max-height: var(--emoji-size);
width: var(--__emoji-picker-header);
max-width: var(--__emoji-picker-header);
height: var(--__emoji-picker-header);
max-height: var(--__emoji-picker-header);
display: flex;
align-items: center;
.svg-inline--fa {
font-size: 1.85em;
}
&.disabled {
opacity: 0.5;
pointer-events: none;
@ -188,8 +197,12 @@
.emoji-picker-emoji.-custom {
object-fit: contain;
max-width: 100%;
max-height: 100%;
width: var(--emoji-size);
max-width: var(--emoji-size);
height: var(--emoji-size);
max-height: var(--emoji-size);
--_still_image-label-scale: 0.5;
}
.emoji-picker-emoji.-unicode {