mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-20 14:37:43 +01:00
fix border of context menu
This commit is contained in:
mrjvs
parent
79e4a689e0
commit
bc27a7ffa7
6 changed files with 36 additions and 38 deletions
|
|
@ -73,7 +73,7 @@ function RouterBase(props: { id: string; children: ReactNode }) {
|
|||
|
||||
return (
|
||||
<a.div ref={ref} style={dimensions} className="overflow-hidden">
|
||||
<Flare.Base className="group w-full bg-video-context-border bg-opacity-25 h-full rounded-2xl transition-colors duration-100 text-video-context-type-main">
|
||||
<Flare.Base className="group w-full bg-video-context-border h-full rounded-2xl transition-colors duration-100 text-video-context-type-main">
|
||||
<Flare.Light
|
||||
flareSize={400}
|
||||
cssColorVar="--colors-video-context-light"
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ function EpisodesView({
|
|||
>
|
||||
<Context.LinkTitle>
|
||||
<div className="text-left flex items-center space-x-3">
|
||||
<span className="p-0.5 px-2 rounded inline bg-video-context-border bg-opacity-10">
|
||||
<span className="p-0.5 px-2 rounded inline bg-video-context-border">
|
||||
E{ep.number}
|
||||
</span>
|
||||
<span className="line-clamp-1 break-all">{ep.title}</span>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export function CaptionOption(props: {
|
|||
}) {
|
||||
return (
|
||||
<div
|
||||
className="grid grid-cols-[auto,1fr,auto] items-center gap-3 rounded -ml-3 -mr-3 px-3 py-2 cursor-pointer hover:bg-video-context-border hover:bg-opacity-10"
|
||||
className="grid grid-cols-[auto,1fr,auto] items-center gap-3 rounded -ml-3 -mr-3 px-3 py-2 cursor-pointer hover:bg-video-context-border"
|
||||
onClick={props.onClick}
|
||||
>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export function SourceOption(props: {
|
|||
return (
|
||||
<div
|
||||
onClick={props.onClick}
|
||||
className="grid grid-cols-[1fr,auto] items-center gap-3 rounded -ml-3 -mr-3 px-3 py-2 cursor-pointer hover:bg-video-context-border hover:bg-opacity-10"
|
||||
className="grid grid-cols-[1fr,auto] items-center gap-3 rounded -ml-3 -mr-3 px-3 py-2 cursor-pointer hover:bg-video-context-border"
|
||||
>
|
||||
<span
|
||||
className={classNames(props.selected && "text-white", "font-medium")}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ function CardWithScrollable(props: { children: React.ReactNode }) {
|
|||
|
||||
function SectionTitle(props: { children: React.ReactNode }) {
|
||||
return (
|
||||
<h3 className="uppercase font-bold text-video-context-type-secondary text-xs pt-8 pl-1 pb-2.5 border-b border-opacity-25 border-video-context-border">
|
||||
<h3 className="uppercase font-bold text-video-context-type-secondary text-xs pt-8 pl-1 pb-2.5 border-b border-video-context-border">
|
||||
{props.children}
|
||||
</h3>
|
||||
);
|
||||
|
|
@ -58,8 +58,8 @@ function Link(props: {
|
|||
"flex justify-between items-center py-2 pl-3 pr-3 -ml-3 rounded w-full",
|
||||
{
|
||||
"cursor-default": !props.onClick,
|
||||
"hover:bg-video-context-border hover:bg-opacity-10": !!props.onClick,
|
||||
"bg-video-context-border bg-opacity-10": props.active,
|
||||
"hover:bg-video-context-border": !!props.onClick,
|
||||
"bg-video-context-border": props.active,
|
||||
}
|
||||
);
|
||||
const styles = { width: "calc(100% + 1.5rem)" };
|
||||
|
|
@ -90,7 +90,7 @@ function Title(props: {
|
|||
}) {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="font-bold text-video-context-type-main pb-3 pt-5 border-b border-opacity-25 border-video-context-border flex justify-between items-center">
|
||||
<h3 className="font-bold text-video-context-type-main pb-3 pt-5 border-b border-video-context-border flex justify-between items-center">
|
||||
<div className="flex items-center space-x-3">{props.children}</div>
|
||||
<div>{props.rightSide}</div>
|
||||
</h3>
|
||||
|
|
@ -135,9 +135,7 @@ function IconButton(props: { icon: Icons; onClick?: () => void }) {
|
|||
}
|
||||
|
||||
function Divider() {
|
||||
return (
|
||||
<hr className="my-4 border-0 w-full h-px bg-video-context-border bg-opacity-25" />
|
||||
);
|
||||
return <hr className="my-4 border-0 w-full h-px bg-video-context-border" />;
|
||||
}
|
||||
|
||||
function SmallText(props: { children: React.ReactNode }) {
|
||||
|
|
|
|||
|
|
@ -26,23 +26,23 @@ module.exports = {
|
|||
"ash-400": "#3D394D",
|
||||
"ash-300": "#2C293A",
|
||||
"ash-200": "#2B2836",
|
||||
"ash-100": "#1E1C26",
|
||||
"ash-100": "#1E1C26"
|
||||
},
|
||||
|
||||
/* fonts */
|
||||
fontFamily: {
|
||||
"open-sans": "'Open Sans'",
|
||||
"open-sans": "'Open Sans'"
|
||||
},
|
||||
|
||||
/* animations */
|
||||
keyframes: {
|
||||
"loading-pin": {
|
||||
"0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" },
|
||||
"20%": { height: "1em", "background-color": "white" },
|
||||
},
|
||||
},
|
||||
animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" },
|
||||
"20%": { height: "1em", "background-color": "white" }
|
||||
}
|
||||
},
|
||||
animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
require("tailwind-scrollbar"),
|
||||
|
|
@ -52,31 +52,31 @@ module.exports = {
|
|||
colors: {
|
||||
// Branding
|
||||
pill: {
|
||||
background: "#1C1C36",
|
||||
background: "#1C1C36"
|
||||
},
|
||||
|
||||
// meta data for the theme itself
|
||||
global: {
|
||||
accentA: "#505DBD",
|
||||
accentB: "#3440A1",
|
||||
accentB: "#3440A1"
|
||||
},
|
||||
|
||||
// light bar
|
||||
lightBar: {
|
||||
light: "#2A2A71",
|
||||
light: "#2A2A71"
|
||||
},
|
||||
|
||||
// Buttons
|
||||
buttons: {
|
||||
toggle: "#8D44D6",
|
||||
toggleDisabled: "#202836",
|
||||
toggleDisabled: "#202836"
|
||||
},
|
||||
|
||||
// only used for body colors/textures
|
||||
background: {
|
||||
main: "#0A0A10",
|
||||
accentA: "#6E3B80",
|
||||
accentB: "#1F1F50",
|
||||
accentB: "#1F1F50"
|
||||
},
|
||||
|
||||
// typography
|
||||
|
|
@ -85,7 +85,7 @@ module.exports = {
|
|||
text: "#73739D",
|
||||
dimmed: "#926CAD",
|
||||
divider: "#262632",
|
||||
secondary: "#64647B",
|
||||
secondary: "#64647B"
|
||||
},
|
||||
|
||||
// search bar
|
||||
|
|
@ -94,7 +94,7 @@ module.exports = {
|
|||
focused: "#24243C",
|
||||
placeholder: "#4A4A71",
|
||||
icon: "#545476",
|
||||
text: "#FFFFFF",
|
||||
text: "#FFFFFF"
|
||||
},
|
||||
|
||||
// media cards
|
||||
|
|
@ -106,7 +106,7 @@ module.exports = {
|
|||
barColor: "#4B4B63",
|
||||
barFillColor: "#BA7FD6",
|
||||
badge: "#151522",
|
||||
badgeText: "#5F5F7A",
|
||||
badgeText: "#5F5F7A"
|
||||
},
|
||||
|
||||
// video player
|
||||
|
|
@ -118,23 +118,23 @@ module.exports = {
|
|||
error: "#E44F4F",
|
||||
success: "#40B44B",
|
||||
loading: "#B759D8",
|
||||
noresult: "#64647B",
|
||||
noresult: "#64647B"
|
||||
},
|
||||
|
||||
progress: {
|
||||
background: "#8787A8",
|
||||
preloaded: "#8787A8",
|
||||
watched: "#A75FC9",
|
||||
watched: "#A75FC9"
|
||||
},
|
||||
|
||||
audio: {
|
||||
set: "#A75FC9",
|
||||
set: "#A75FC9"
|
||||
},
|
||||
|
||||
context: {
|
||||
background: "#0C1216",
|
||||
light: "#4D79A8",
|
||||
border: "#4F5C66",
|
||||
border: "#141D23",
|
||||
buttonFocus: "#202836",
|
||||
flagBg: "#202836",
|
||||
cardBorder: "#1B262E",
|
||||
|
|
@ -142,13 +142,13 @@ module.exports = {
|
|||
type: {
|
||||
main: "#617A8A",
|
||||
secondary: "#374A56",
|
||||
accent: "#A570FA",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
accent: "#A570FA"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue