mirror of
https://github.com/Vendicated/Vencord.git
synced 2024-09-20 06:30:35 +00:00
BetterQuickReact: Compact mode + fix grid not being centered
This commit is contained in:
parent
53ab164cf8
commit
9dcae6b09a
2 changed files with 27 additions and 6 deletions
|
@ -1,11 +1,27 @@
|
|||
/* Fixes to make the quick reactions look better */
|
||||
|
||||
.vc-better-quick-react {
|
||||
padding: 4px 0 6px;
|
||||
justify-self: center;
|
||||
gap: 4px;
|
||||
max-width: calc((var(--vc-better-quick-react-columns) * 44px) - 4px);
|
||||
grid-template-columns: repeat(var(--vc-better-quick-react-columns), 40px);
|
||||
/* Discord officially has a 2px right margin and a 0px left margin, which is a hack for their selection border being cut off on the right */
|
||||
padding: 4px 1px 6px;
|
||||
justify-content: center;
|
||||
grid-template-columns: repeat(var(--vc-better-quick-react-columns), 44px);
|
||||
grid-template-rows: unset;
|
||||
grid-auto-rows: 44px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.vc-better-quick-react.vc-better-quick-react-compact {
|
||||
grid-template-columns: repeat(var(--vc-better-quick-react-columns), 33px);
|
||||
grid-auto-rows: 33px;
|
||||
}
|
||||
|
||||
.vc-better-quick-react.vc-better-quick-react-compact > div {
|
||||
scale: 0.75;
|
||||
}
|
||||
|
||||
.vc-better-quick-react.vc-better-quick-react-compact img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
[class*="menu_"]:has(>div>.vc-better-quick-react) {
|
||||
|
|
|
@ -31,6 +31,11 @@ export const settings = definePluginSettings({
|
|||
markers: makeRange(4, 10, 1),
|
||||
stickToMarkers: true
|
||||
},
|
||||
compactMode: {
|
||||
description: "Scales the buttons to 75% of their original scale, while increasing the emoji to 125% scale to stay visible. Recommended to have a minimum of 5 columns",
|
||||
type: OptionType.BOOLEAN,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
export default definePlugin({
|
||||
|
@ -58,7 +63,7 @@ export default definePlugin({
|
|||
find: "default.Messages.ADD_REACTION_NAMED.format",
|
||||
replacement: {
|
||||
match: /className:(\i)\.wrapper,/,
|
||||
replace: "className:\"vc-better-quick-react \"+$1.wrapper,style:{\"--vc-better-quick-react-columns\":$self.settings.store.columns},"
|
||||
replace: "className:\"vc-better-quick-react \"+($self.settings.store.compactMode?\"vc-better-quick-react-compact \":\"\")+$1.wrapper,style:{\"--vc-better-quick-react-columns\":$self.settings.store.columns},"
|
||||
}
|
||||
},
|
||||
// MenuGroup doesn't accept styles or anything special by default :/
|
||||
|
|
Loading…
Reference in a new issue