Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-11-11 00:35:07 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix border of context menu

Browse Source
This commit is contained in:
mrjvs 2023-10-18 17:21:31 +02:00
parent 79e4a689e0
commit bc27a7ffa7
6 changed files with 36 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/overlays/OverlayRouter.tsx
View File

@ -73,7 +73,7 @@ function RouterBase(props: { id: string; children: ReactNode }) {
return ( return (
<a.div ref={ref} style={dimensions} className="overflow-hidden"> <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 <Flare.Light
flareSize={400} flareSize={400}
cssColorVar="--colors-video-context-light" cssColorVar="--colors-video-context-light"

2
src/components/player/atoms/Episodes.tsx
View File

@ -125,7 +125,7 @@ function EpisodesView({
> >
<Context.LinkTitle> <Context.LinkTitle>
<div className="text-left flex items-center space-x-3"> <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} E{ep.number}
</span> </span>
<span className="line-clamp-1 break-all">{ep.title}</span> <span className="line-clamp-1 break-all">{ep.title}</span>

2
src/components/player/atoms/settings/CaptionsView.tsx
View File

@ -26,7 +26,7 @@ export function CaptionOption(props: {
}) { }) {
return ( return (
<div <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} onClick={props.onClick}
> >
<div> <div>

2
src/components/player/atoms/settings/SourceSelectingView.tsx
View File

@ -28,7 +28,7 @@ export function SourceOption(props: {
return ( return (
<div <div
onClick={props.onClick} 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 <span
className={classNames(props.selected && "text-white", "font-medium")} className={classNames(props.selected && "text-white", "font-medium")}

12
src/components/player/internals/ContextUtils.tsx
View File

@ -22,7 +22,7 @@ function CardWithScrollable(props: { children: React.ReactNode }) {
function SectionTitle(props: { children: React.ReactNode }) { function SectionTitle(props: { children: React.ReactNode }) {
return ( 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} {props.children}
</h3> </h3>
); );
@ -58,8 +58,8 @@ function Link(props: {
"flex justify-between items-center py-2 pl-3 pr-3 -ml-3 rounded w-full", "flex justify-between items-center py-2 pl-3 pr-3 -ml-3 rounded w-full",
{ {
"cursor-default": !props.onClick, "cursor-default": !props.onClick,
"hover:bg-video-context-border hover:bg-opacity-10": !!props.onClick, "hover:bg-video-context-border": !!props.onClick,
"bg-video-context-border bg-opacity-10": props.active, "bg-video-context-border": props.active,
} }
); );
const styles = { width: "calc(100% + 1.5rem)" }; const styles = { width: "calc(100% + 1.5rem)" };
@ -90,7 +90,7 @@ function Title(props: {
}) { }) {
return ( return (
<div> <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 className="flex items-center space-x-3">{props.children}</div>
<div>{props.rightSide}</div> <div>{props.rightSide}</div>
</h3> </h3>
@ -135,9 +135,7 @@ function IconButton(props: { icon: Icons; onClick?: () => void }) {
} }
function Divider() { function Divider() {
return ( return <hr className="my-4 border-0 w-full h-px bg-video-context-border" />;
<hr className="my-4 border-0 w-full h-px bg-video-context-border bg-opacity-25" />
);
} }
function SmallText(props: { children: React.ReactNode }) { function SmallText(props: { children: React.ReactNode }) {

54
tailwind.config.js
View File

@ -26,23 +26,23 @@ module.exports = {
"ash-400": "#3D394D", "ash-400": "#3D394D",
"ash-300": "#2C293A", "ash-300": "#2C293A",
"ash-200": "#2B2836", "ash-200": "#2B2836",
"ash-100": "#1E1C26", "ash-100": "#1E1C26"
}, },
/* fonts */ /* fonts */
fontFamily: { fontFamily: {
"open-sans": "'Open Sans'", "open-sans": "'Open Sans'"
}, },
/* animations */ /* animations */
keyframes: { keyframes: {
"loading-pin": { "loading-pin": {
"0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" }, "0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" },
"20%": { height: "1em", "background-color": "white" }, "20%": { height: "1em", "background-color": "white" }
}, }
}, },
animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }, animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }
}, }
}, },
plugins: [ plugins: [
require("tailwind-scrollbar"), require("tailwind-scrollbar"),
@ -52,31 +52,31 @@ module.exports = {
colors: { colors: {
// Branding // Branding
pill: { pill: {
background: "#1C1C36", background: "#1C1C36"
}, },
// meta data for the theme itself // meta data for the theme itself
global: { global: {
accentA: "#505DBD", accentA: "#505DBD",
accentB: "#3440A1", accentB: "#3440A1"
}, },
// light bar // light bar
lightBar: { lightBar: {
light: "#2A2A71", light: "#2A2A71"
}, },
// Buttons // Buttons
buttons: { buttons: {
toggle: "#8D44D6", toggle: "#8D44D6",
toggleDisabled: "#202836", toggleDisabled: "#202836"
}, },
// only used for body colors/textures // only used for body colors/textures
background: { background: {
main: "#0A0A10", main: "#0A0A10",
accentA: "#6E3B80", accentA: "#6E3B80",
accentB: "#1F1F50", accentB: "#1F1F50"
}, },
// typography // typography
@ -85,7 +85,7 @@ module.exports = {
text: "#73739D", text: "#73739D",
dimmed: "#926CAD", dimmed: "#926CAD",
divider: "#262632", divider: "#262632",
secondary: "#64647B", secondary: "#64647B"
}, },
// search bar // search bar
@ -94,7 +94,7 @@ module.exports = {
focused: "#24243C", focused: "#24243C",
placeholder: "#4A4A71", placeholder: "#4A4A71",
icon: "#545476", icon: "#545476",
text: "#FFFFFF", text: "#FFFFFF"
}, },
// media cards // media cards
@ -106,7 +106,7 @@ module.exports = {
barColor: "#4B4B63", barColor: "#4B4B63",
barFillColor: "#BA7FD6", barFillColor: "#BA7FD6",
badge: "#151522", badge: "#151522",
badgeText: "#5F5F7A", badgeText: "#5F5F7A"
}, },
// video player // video player
@ -118,23 +118,23 @@ module.exports = {
error: "#E44F4F", error: "#E44F4F",
success: "#40B44B", success: "#40B44B",
loading: "#B759D8", loading: "#B759D8",
noresult: "#64647B", noresult: "#64647B"
}, },
progress: { progress: {
background: "#8787A8", background: "#8787A8",
preloaded: "#8787A8", preloaded: "#8787A8",
watched: "#A75FC9", watched: "#A75FC9"
}, },
audio: { audio: {
set: "#A75FC9", set: "#A75FC9"
}, },
context: { context: {
background: "#0C1216", background: "#0C1216",
light: "#4D79A8", light: "#4D79A8",
border: "#4F5C66", border: "#141D23",
buttonFocus: "#202836", buttonFocus: "#202836",
flagBg: "#202836", flagBg: "#202836",
cardBorder: "#1B262E", cardBorder: "#1B262E",
@ -142,13 +142,13 @@ module.exports = {
type: { type: {
main: "#617A8A", main: "#617A8A",
secondary: "#374A56", secondary: "#374A56",
accent: "#A570FA", accent: "#A570FA"
}, }
}, }
}, }
}, }
}, }
}, }
}), })
], ]
}; };