Skip to content
This repository was archived by the owner on Sep 26, 2023. It is now read-only.

Commit d56e317

Browse files
joeattardijoeattardi
committed
Fix invalid CSS and add minification to build
1 parent b5c64cb commit d56e317

File tree

12 files changed

+1314
-77
lines changed

12 files changed

+1314
-77
lines changed

‎integration/index.css

+83-32
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
--placeholder-background-color: #cccccc;
6161
--preview-background-color: var(--secondary-background-color);
6262
--scrollbar-background-color: var(--background-color);
63-
--scrollbar-color: rgba(0, 0, 0, 0.75);
63+
--scrollbar-color: #aaa;
6464
--search-background-color: #f9fafb;
6565
--search-focus-background-color: #ffffff;
6666
--search-icon-color: #999999;
@@ -134,41 +134,80 @@
134134
}
135135
}
136136

137-
.picmo-picker .categoryButtons {
138-
--tab-size-ratio: 1.55;
139-
--tab-padding: 0.5em;
140-
--tab-area-width: calc(var(--picker-width) - (var(--tab-padding) * 2));
141-
--tab-size: calc((var(--tab-area-width) / var(--category-count))) / var(--tab-size-ratio);
137+
.picmo-picker .categoryButtonsContainer {
138+
overflow: auto;
139+
padding: 2px 0;
140+
scrollbar-width: thin;
141+
}
142142

143-
display: grid;
144-
grid-auto-columns: 1fr;
145-
grid-auto-flow: column;
143+
.picmo-picker .categoryButtonsContainer.has-overflow-right {
144+
mask-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%);
145+
-webkit-mask-image: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%);
146+
}
147+
148+
.picmo-picker .categoryButtonsContainer.has-overflow-left {
149+
mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%);
150+
-webkit-mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 10%);
151+
}
152+
153+
.picmo-picker .categoryButtonsContainer.has-overflow-both {
154+
mask-image: linear-gradient(
155+
90deg,
156+
rgba(255, 255, 255, 0) 0%,
157+
rgba(255, 255, 255, 1) 10%,
158+
rgba(255, 255, 255, 1) 90%,
159+
rgba(255, 255, 255, 0) 100%
160+
);
161+
162+
-webkit-mask-image: linear-gradient(
163+
90deg,
164+
rgba(255, 255, 255, 0) 0%,
165+
rgba(255, 255, 255, 1) 10%,
166+
rgba(255, 255, 255, 1) 90%,
167+
rgba(255, 255, 255, 0) 100%
168+
);
169+
}
170+
171+
.picmo-picker .categoryButtonsContainer::-webkit-scrollbar {
172+
width: 8px;
173+
height: 8px;
174+
}
175+
176+
.picmo-picker .categoryButtonsContainer::-webkit-scrollbar-thumb {
177+
background: var(--scrollbar-color);
178+
border-radius: 1em;
179+
}
180+
181+
.picmo-picker .categoryButtons {
182+
display: flex;
183+
flex-direction: row;
146184
gap: var(--tab-gap);
147-
justify-content: center;
148185
margin: 0;
149-
padding: 0 var(--tab-padding);
186+
padding: 0 0.5em;
150187
align-items: center;
151188
height: var(--category-tabs-height);
152189
box-sizing: border-box;
153-
190+
width: 100%;
191+
justify-content: space-between;
154192
position: relative;
155193

156194
list-style-type: none;
195+
justify-self: center;
196+
max-width: min(calc(8 * 2rem * 1.3 + 2.75rem), calc(var(--category-count) * 2.5rem));
157197
}
158198

159199
.picmo-picker .categoryButtons .categoryTab {
160200
display: flex;
161201
align-items: center;
162-
justify-content: stretch;
163202
transition: all 100ms;
203+
width: 2em;
164204
}
165205

166206
.picmo-picker .categoryButtons .categoryTab.categoryTabActive .categoryButton {
167207
color: var(--category-tab-active-color);
168-
background:
169-
linear-gradient(rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 100%),
208+
background: linear-gradient(rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 100%),
170209
linear-gradient(var(--category-tab-active-color) 0%, var(--category-tab-active-color) 100%);
171-
210+
172211
border: 2px solid var(--category-tab-active-color);
173212
}
174213

@@ -188,7 +227,6 @@
188227
align-items: center;
189228
justify-content: center;
190229
font-size: 1.2rem;
191-
font-size: min(var(--tab-size), 1.2rem);
192230
width: 1.6em;
193231
height: 1.6em;
194232
transition: all 100ms;
@@ -287,7 +325,7 @@
287325
.emojiButton:focus {
288326
border-radius: 0;
289327
background: var(--focus-indicator-background-color);
290-
outline: 1px soldi var(--focus-indicator-color);
328+
outline: 1px solid var(--focus-indicator-color);
291329
}
292330

293331
.picmo-picker .emojiArea {
@@ -460,15 +498,27 @@
460498
transform: translateX(-100%);
461499
background-image: linear-gradient(
462500
90deg,
463-
rgba(#fff, 0) 0,
464-
rgba(#fff, 0.2) 20%,
465-
rgba(#fff, 0.5) 60%,
466-
rgba(#fff, 0)
501+
rgba(255, 255, 255, 0) 0,
502+
rgba(255, 255, 255, 0.2) 20%,
503+
rgba(255, 255, 255, 0.5) 60%,
504+
rgba(255, 255, 255, 0) 100%
467505
);
468506
animation: shine 2s infinite;
469507
content: '';
470508
}
471509

510+
.picmo-picker.skeleton .headerSkeleton {
511+
background-color: var(--secondary-background-color);
512+
padding-top: 8px;
513+
padding-bottom: 8px;
514+
display: flex;
515+
flex-direction: column;
516+
overflow: hidden;
517+
gap: 8px;
518+
border-bottom: 1px solid var(--border-color);
519+
width: var(--picker-width);
520+
}
521+
472522
.picmo-picker.skeleton .searchSkeleton {
473523
padding: 0 8px;
474524
height: var(--search-height);
@@ -484,15 +534,17 @@
484534
height: var(--category-tabs-height);
485535
display: flex;
486536
flex-direction: row;
487-
justify-content: space-around;
488537
align-items: center;
538+
justify-self: center;
539+
width: calc(2rem * var(--category-count));
489540
}
490541

491542
.picmo-picker.skeleton .categoryTabsSkeleton .categoryTab {
492543
width: 25px;
493544
height: 25px;
494545
padding: 2px;
495546
border-radius: 5px;
547+
margin: 0.25em;
496548
}
497549

498550
.picmo-picker.skeleton .contentSkeleton {
@@ -517,6 +569,7 @@
517569
grid-auto-rows: calc(var(--emoji-size) * var(--emoji-size-multiplier));
518570
align-items: center;
519571
justify-items: center;
572+
width: var(--picker-width);
520573
}
521574

522575
.picmo-picker.skeleton .contentSkeleton .emojiGrid .emoji {
@@ -548,8 +601,8 @@
548601

549602
.picmo-picker.skeleton .previewSkeleton .previewName {
550603
grid-area: name;
551-
width: 12em;
552604
height: 0.8em;
605+
width: 80%;
553606
}
554607

555608
.picmo-picker.skeleton .previewSkeleton .tagList {
@@ -566,7 +619,7 @@
566619
padding: 2px 8px;
567620
margin-right: 0.25em;
568621
height: 1em;
569-
width: 3em;
622+
width: 20%;
570623
}
571624

572625
.overlay {
@@ -599,11 +652,9 @@
599652

600653
.content.fullHeight::-webkit-scrollbar-thumb {
601654
background: var(--scrollbar-color);
602-
border-left: 4px solid transparent;
603-
border-right: 4px solid transparent;
604655
background-clip: padding-box;
605656
height: 1em;
606-
border-radius: 1em
657+
border-radius: 0.5em
607658
}
608659

609660
.pluginContainer {
@@ -818,10 +869,10 @@
818869
transform: translateX(-100%);
819870
background-image: linear-gradient(
820871
90deg,
821-
rgba(#fff, 0) 0,
822-
rgba(#fff, 0.2) 20%,
823-
rgba(#fff, 0.5) 60%,
824-
rgba(#fff, 0)
872+
rgba(255, 255, 255, 0) 0,
873+
rgba(255, 255, 255, 0.2) 20%,
874+
rgba(255, 255, 255, 0.5) 60%,
875+
rgba(255, 255, 255, 0) 100%
825876
);
826877
animation: shine 2s infinite;
827878
content: '';

0 commit comments

Comments
 (0)