mirror of
https://github.com/XFox111/TabsAsideExtension.git
synced 2026-04-22 07:58:01 +03:00
112 lines
2.0 KiB
TypeScript
112 lines
2.0 KiB
TypeScript
import { makeStyles, tokens } from "@fluentui/react-components";
|
|
|
|
export const useStyles_TabView = makeStyles({
|
|
root:
|
|
{
|
|
display: "grid",
|
|
position: "relative",
|
|
|
|
width: "160px",
|
|
height: "120px",
|
|
flexShrink: 0,
|
|
marginBottom: tokens.spacingVerticalSNudge,
|
|
|
|
border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
|
|
borderRadius: tokens.borderRadiusMedium,
|
|
backgroundColor: tokens.colorNeutralBackground1,
|
|
|
|
cursor: "pointer",
|
|
textDecoration: "none !important",
|
|
userSelect: "none",
|
|
|
|
"&:hover button, &:focus-within button":
|
|
{
|
|
display: "inline-flex"
|
|
},
|
|
|
|
"&:hover":
|
|
{
|
|
boxShadow: tokens.shadow4
|
|
},
|
|
|
|
"&:focus-visible":
|
|
{
|
|
outline: `2px solid ${tokens.colorStrokeFocus2}`
|
|
}
|
|
},
|
|
listView:
|
|
{
|
|
width: "100%",
|
|
height: "min-content",
|
|
marginBottom: tokens.spacingVerticalNone
|
|
},
|
|
image:
|
|
{
|
|
zIndex: 0,
|
|
position: "absolute",
|
|
height: "100%",
|
|
width: "100%",
|
|
|
|
borderRadius: tokens.borderRadiusMedium,
|
|
objectFit: "cover"
|
|
},
|
|
header:
|
|
{
|
|
zIndex: 1,
|
|
alignSelf: "end",
|
|
minHeight: "32px",
|
|
|
|
display: "grid",
|
|
gridTemplateColumns: "auto 1fr auto",
|
|
alignItems: "center",
|
|
|
|
borderBottomLeftRadius: tokens.borderRadiusMedium,
|
|
borderBottomRightRadius: tokens.borderRadiusMedium,
|
|
|
|
backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover,
|
|
color: tokens.colorNeutralForeground1,
|
|
"-webkit-backdrop-filer": "blur(4px)",
|
|
backdropFilter: "blur(4px)"
|
|
},
|
|
icon:
|
|
{
|
|
cursor: "grab",
|
|
padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalSNudge}`,
|
|
height: "32px",
|
|
boxSizing: "border-box",
|
|
|
|
"&:active":
|
|
{
|
|
cursor: "grabbing"
|
|
}
|
|
},
|
|
title:
|
|
{
|
|
overflowX: "hidden",
|
|
justifySelf: "start",
|
|
maxWidth: "100%"
|
|
},
|
|
deleteButton:
|
|
{
|
|
display: "none"
|
|
},
|
|
showDeleteButton:
|
|
{
|
|
display: "inline-flex"
|
|
},
|
|
dragOverlay:
|
|
{
|
|
cursor: "grabbing !important",
|
|
transform: "scale(1.05)",
|
|
boxShadow: `${tokens.shadow16} !important`,
|
|
"& > div":
|
|
{
|
|
pointerEvents: "none"
|
|
}
|
|
},
|
|
dragging:
|
|
{
|
|
visibility: "hidden"
|
|
}
|
|
});
|