make plugin cards prettier (#389)
Co-authored-by: Ven <vendicated@riseup.net>
This commit is contained in:
parent
7582feb603
commit
0e5b8b07c9
@ -152,14 +152,11 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
|
|||||||
onChange={toggleEnabled}
|
onChange={toggleEnabled}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
value={isEnabled()}
|
value={isEnabled()}
|
||||||
note={<Text className={cl("note")} variant="text-md/normal">{plugin.description}</Text>}
|
note={<Text className={cl("note")} variant="text-sm/normal">{plugin.description}</Text>}
|
||||||
hideBorder={true}
|
hideBorder={true}
|
||||||
>
|
>
|
||||||
<Flex className={cl("flex")}>
|
<Flex className={cl("flex")}>
|
||||||
<Text
|
<Text variant="text-md/bold" className={cl("name")}>
|
||||||
variant="text-md/bold"
|
|
||||||
className={cl("name")}
|
|
||||||
>
|
|
||||||
{plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />}
|
{plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />}
|
||||||
</Text>
|
</Text>
|
||||||
<button role="switch" onClick={() => openModal()} className={classes("button-12Fmur", cl("info-button"))}>
|
<button role="switch" onClick={() => openModal()} className={classes("button-12Fmur", cl("info-button"))}>
|
||||||
|
@ -24,13 +24,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.vc-plugins-card {
|
.vc-plugins-card {
|
||||||
background-color: var(--background-modifier-selected);
|
background-color: var(--background-secondary-alt);
|
||||||
color: var(--interactive-active);
|
color: var(--interactive-active);
|
||||||
border-radius: 3px;
|
border-radius: 8px;
|
||||||
display: block;
|
display: block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
transition: 0.1s ease-out;
|
||||||
|
transition-property: box-shadow, transform, background, opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-plugins-card:hover {
|
||||||
|
background-color: var(--background-tertiary);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: var(--elevation-high);
|
||||||
}
|
}
|
||||||
|
|
||||||
.vc-plugins-info-button {
|
.vc-plugins-info-button {
|
||||||
@ -41,6 +49,10 @@
|
|||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vc-plugins-settings-button:hover {
|
||||||
|
color: var(--interactive-hover);
|
||||||
|
}
|
||||||
|
|
||||||
.vc-plugins-filter-controls {
|
.vc-plugins-filter-controls {
|
||||||
display: grid;
|
display: grid;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
@ -61,7 +73,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.vc-plugins-note {
|
.vc-plugins-note {
|
||||||
height: 40px;
|
height: 36px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
@ -77,6 +89,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
cursor: "default";
|
||||||
}
|
}
|
||||||
|
|
||||||
.vc-plugins-flex {
|
.vc-plugins-flex {
|
||||||
|
Loading…
Reference in New Issue
Block a user