mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-12-25 07:04:11 +08:00
style: Adjust some styles. (#1103)
This commit is contained in:
parent
5823f03a05
commit
249880d9e6
@ -25,7 +25,7 @@ export const Button: ParentComponent<
|
|||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
class={twMerge(
|
class={twMerge(
|
||||||
'btn flex items-center',
|
'btn flex items-center leading-8',
|
||||||
local.loading ? 'btn-disabled' : local.class,
|
local.loading ? 'btn-disabled' : local.class,
|
||||||
)}
|
)}
|
||||||
{...others}
|
{...others}
|
||||||
|
@ -19,10 +19,10 @@ export const Latency: ParentComponent<Props> = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
class={twMerge('badge whitespace-nowrap', textClassName(), local.class)}
|
class={twMerge('badge w-11 whitespace-nowrap', textClassName(), local.class)}
|
||||||
{...others}
|
{...others}
|
||||||
>
|
>
|
||||||
{latency() || '-'}
|
{latency() || '---'}
|
||||||
</span>
|
</span>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -49,26 +49,25 @@ export const ProxyNodeCard = (props: {
|
|||||||
class={twMerge(
|
class={twMerge(
|
||||||
'card bg-neutral text-neutral-content',
|
'card bg-neutral text-neutral-content',
|
||||||
isSelected &&
|
isSelected &&
|
||||||
'bg-gradient-to-b from-primary to-secondary text-primary-content',
|
'bg-gradient-to-br from-primary to-secondary text-primary-content',
|
||||||
onClick && 'cursor-pointer',
|
onClick && 'cursor-pointer',
|
||||||
)}
|
)}
|
||||||
title={title()}
|
title={title()}
|
||||||
>
|
>
|
||||||
<Tooltip.Trigger>
|
<Tooltip.Trigger>
|
||||||
<div class="card-body space-y-1 p-2.5" onClick={onClick}>
|
<div class="card-body gap-1 space-y-1 p-2.5" onClick={onClick}>
|
||||||
<h2 class="card-title line-clamp-1 break-all text-start text-sm">
|
<h2 class="card-title line-clamp-1 break-all text-start text-sm">
|
||||||
{proxyName}
|
{proxyName}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div class="card-actions items-center justify-between">
|
<div class="card-actions items-center justify-between gap-1">
|
||||||
<div class="badge badge-secondary badge-sm font-bold uppercase">
|
<div class="badge badge-secondary px-1 text-xs font-bold capitalize">
|
||||||
{formatProxyType(proxyNode()?.type)}
|
{formatProxyType(proxyNode()?.type)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Latency
|
<Latency
|
||||||
proxyName={props.proxyName}
|
proxyName={props.proxyName}
|
||||||
class={twMerge(
|
class={twMerge(
|
||||||
isSelected && 'badge-primary',
|
|
||||||
proxyLatencyTestingMap()[proxyName] && 'animate-pulse',
|
proxyLatencyTestingMap()[proxyName] && 'animate-pulse',
|
||||||
)}
|
)}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
@ -85,10 +84,10 @@ export const ProxyNodeCard = (props: {
|
|||||||
<Tooltip.Content class="z-50">
|
<Tooltip.Content class="z-50">
|
||||||
<Tooltip.Arrow class="text-neutral" />
|
<Tooltip.Arrow class="text-neutral" />
|
||||||
|
|
||||||
<div class="flex flex-col items-center gap-2 rounded-box bg-neutral p-2.5 text-neutral-content">
|
<div class="flex flex-col items-center gap-2 rounded-box bg-neutral bg-gradient-to-br from-primary to-secondary p-2.5 text-primary-content shadow-lg">
|
||||||
<h2 class="text-lg font-bold">{proxyName}</h2>
|
<h2 class="text-lg font-bold">{proxyName}</h2>
|
||||||
|
|
||||||
<div class="w-full text-xs text-neutral-content">
|
<div class="w-full text-xs uppercase">
|
||||||
{specialTypes()}
|
{specialTypes()}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -113,7 +112,7 @@ export const ProxyNodeCard = (props: {
|
|||||||
getLatencyClassName(latencyTestResult.delay),
|
getLatencyClassName(latencyTestResult.delay),
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{latencyTestResult.delay || '-'}
|
{latencyTestResult.delay || '---'}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -5,15 +5,15 @@ export const formatProxyType = (type = '') => {
|
|||||||
const t = type.toLowerCase()
|
const t = type.toLowerCase()
|
||||||
|
|
||||||
if (t.includes('shadowsocks')) {
|
if (t.includes('shadowsocks')) {
|
||||||
return t.replace('shadowsocks', 'ss') // for both ss and ssr
|
return t.replace('shadowsocks', 'SS') // for both ss and ssr
|
||||||
}
|
}
|
||||||
|
|
||||||
if (t.includes('hysteria')) {
|
if (t.includes('hysteria')) {
|
||||||
return t.replace('hysteria', 'hy')
|
return t.replace('hysteria', 'HY')
|
||||||
}
|
}
|
||||||
|
|
||||||
if (t === 'wireguard') {
|
if (t === 'wireguard') {
|
||||||
return 'wg'
|
return 'WG'
|
||||||
}
|
}
|
||||||
|
|
||||||
return t
|
return t
|
||||||
@ -25,7 +25,7 @@ export const getLatencyClassName = (latency: LATENCY_QUALITY_MAP_HTTP) => {
|
|||||||
} else if (latency > latencyQualityMap().MEDIUM) {
|
} else if (latency > latencyQualityMap().MEDIUM) {
|
||||||
return 'text-warning'
|
return 'text-warning'
|
||||||
} else if (latency === LATENCY_QUALITY_MAP_HTTP.NOT_CONNECTED) {
|
} else if (latency === LATENCY_QUALITY_MAP_HTTP.NOT_CONNECTED) {
|
||||||
return 'text-neutral-content'
|
return 'text-gray'
|
||||||
} else {
|
} else {
|
||||||
return 'text-success'
|
return 'text-success'
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user