mirror of
https://github.com/community-unscripted/Proxmox.git
synced 2026-07-01 20:44:03 -04:00
Updated the theme to blue
This commit is contained in:
Bram Suurd
+33
-33
@@ -5,47 +5,47 @@
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
--primary: 201 100% 38%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 221.2 83.2% 53.3%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
--ring: 240 5.9% 10%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 221.2 83.2% 53.3%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 201 100% 38%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 217.2 91.2% 59.8%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 240 4.9% 83.9%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 224.3 76.3% 48%;
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
|
||||
+17
-10
@@ -167,12 +167,12 @@ function ScriptItem({
|
||||
{item && (
|
||||
<div className="mr-7 mt-0 flex w-full min-w-fit">
|
||||
<div className="flex w-full min-w-fit">
|
||||
<div className="flex w-full flex-col animate-fade">
|
||||
<div className="flex w-full animate-fade flex-col">
|
||||
<div className="flex min-w-max items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">Selected Script</h2>
|
||||
<X onClick={closeScript} className="cursor-pointer" />
|
||||
</div>
|
||||
<div className="border rounded-lg p-4 mt-2">
|
||||
<div className="mt-2 rounded-lg border p-4">
|
||||
<div className="mt-4 flex justify-between">
|
||||
<div className="flex">
|
||||
<Image
|
||||
@@ -186,7 +186,9 @@ function ScriptItem({
|
||||
<div className="ml-4 flex flex-col justify-between">
|
||||
<div className="flex h-full w-full flex-col justify-between">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold">{item.title}</h1>
|
||||
<h1 className="text-lg font-semibold">
|
||||
{item.title}
|
||||
</h1>
|
||||
<p className="w-full text-sm text-muted-foreground">
|
||||
Date added: {extractDate(item.created)}
|
||||
</p>
|
||||
@@ -238,7 +240,9 @@ function ScriptItem({
|
||||
<Button
|
||||
variant={"secondary"}
|
||||
size={"sm"}
|
||||
onClick={() => handleCopy("interface", item.interface)}
|
||||
onClick={() =>
|
||||
handleCopy("interface", item.interface)
|
||||
}
|
||||
>
|
||||
{item.interface}
|
||||
</Button>
|
||||
@@ -314,7 +318,7 @@ function ScriptItem({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 border rounded-lg p-4 dark:bg-neutral-900 bg-neutral-300">
|
||||
<div className="mt-6 rounded-lg border dark:bg-blue-900/20 bg-blue-900/20 p-4">
|
||||
<h2 className="text-lg font-semibold">
|
||||
How to {item.item_type ? "install" : "use"}
|
||||
</h2>
|
||||
@@ -362,8 +366,8 @@ function ScriptItem({
|
||||
{item.hasAlpineScript && (
|
||||
<>
|
||||
<p className="mt-2 max-w-2xl text-sm">
|
||||
As an alternative option, you can use Alpine Linux
|
||||
and the {item.title} package to create a{" "}
|
||||
As an alternative option, you can use Alpine
|
||||
Linux and the {item.title} package to create a{" "}
|
||||
{item.title} {item.item_type} container with
|
||||
faster creation time and minimal system resource
|
||||
usage. You are also obliged to adhere to updates
|
||||
@@ -381,7 +385,10 @@ function ScriptItem({
|
||||
variant={"secondary"}
|
||||
size={"sm"}
|
||||
onClick={() =>
|
||||
handleCopy("install command", item.alpineScript)
|
||||
handleCopy(
|
||||
"install command",
|
||||
item.alpineScript,
|
||||
)
|
||||
}
|
||||
>
|
||||
{!isMobile && item.alpineScript
|
||||
@@ -403,8 +410,8 @@ function ScriptItem({
|
||||
</p>
|
||||
{item.isUpdateable && (
|
||||
<p className="text-sm">
|
||||
To Update {item.title}, run the command below (or
|
||||
type update) in the LXC Console.
|
||||
To Update {item.title}, run the command below
|
||||
(or type update) in the LXC Console.
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -107,7 +107,7 @@ const ScriptBrowser = ({
|
||||
<div className="flex min-w-72 flex-col sm:max-w-72">
|
||||
<h1 className="mb-5 text-xl font-bold">Scripts</h1>
|
||||
<div className="relative">
|
||||
<div className="flex items-center mb-1">
|
||||
<div className="mb-1 flex items-center">
|
||||
<Input
|
||||
className="flex-grow"
|
||||
type="text"
|
||||
@@ -118,22 +118,38 @@ const ScriptBrowser = ({
|
||||
/>
|
||||
{searchTerm && (
|
||||
<X
|
||||
className="w-4 h-4 cursor-pointer ml-2"
|
||||
className="ml-2 h-4 w-4 cursor-pointer"
|
||||
onClick={() => handleSearch("")}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: '0.5rem'
|
||||
position: "absolute",
|
||||
right: "0.5rem",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{searchTerm ? (
|
||||
<p className="text-xs text-neutral-500 mb-1 ml-2 animate-fade-left">Press 'Esc' to clear the search</p>
|
||||
<p className="mb-1 ml-2 animate-fade-left text-xs text-muted-foreground">
|
||||
Press 'Esc' to clear the search
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-neutral-500 mb-1 ml-2 animate-fade-left">
|
||||
<a className="cursor-pointer" onClick={() => setShowLogos(!showLogos)}>
|
||||
{showLogos ? <><EyeOff className="inline-block align-text-bottom mr-1 w-4 h-4" />Hide Logos</> : <><Eye className="inline-block align-text-bottom mr-1 w-4 h-4" />Show Logos</>}
|
||||
</a></p>
|
||||
<p className="mb-1 ml-2 animate-fade-left text-xs text-muted-foreground">
|
||||
<a
|
||||
className="cursor-pointer"
|
||||
onClick={() => setShowLogos(!showLogos)}
|
||||
>
|
||||
{showLogos ? (
|
||||
<>
|
||||
<EyeOff className="mr-1 inline-block h-4 w-4 align-text-bottom" />
|
||||
Hide Logos
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Eye className="mr-1 inline-block h-4 w-4 align-text-bottom" />
|
||||
Show Logos
|
||||
</>
|
||||
)}
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Accordion {...accordionProps}>
|
||||
@@ -145,7 +161,11 @@ const ScriptBrowser = ({
|
||||
>
|
||||
<AccordionTrigger>{category.catagoryName}</AccordionTrigger>
|
||||
<AccordionContent
|
||||
data-state={expandedItems.includes(category.catagoryName) ? "open" : "closed"}
|
||||
data-state={
|
||||
expandedItems.includes(category.catagoryName)
|
||||
? "open"
|
||||
: "closed"
|
||||
}
|
||||
className="pb-2 pt-0"
|
||||
>
|
||||
{category.expand.items
|
||||
@@ -159,9 +179,9 @@ const ScriptBrowser = ({
|
||||
pathname: "/scripts",
|
||||
query: { id: script.title },
|
||||
}}
|
||||
className={`py-1 px-1 hover:rounded-lg hover:bg-neutral-50 hover:dark:bg-neutral-800 hover:dark:bg-neutral-700 flex cursor-pointer items-center justify-between gap-1 text-muted-foreground ${
|
||||
className={`hover:dark:bg-blue-900/20 flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-blue-300/20 hover:bg-neutral-50 ${
|
||||
selectedScript === script.title
|
||||
? "rounded-lg font-semibold dark:text-white bg-neutral-100 dark:bg-neutral-900"
|
||||
? "bg-blue-300/20 rounded-lg font-semibold dark:bg-blue-900/20 dark:text-white"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => handleSelected(script.title)}
|
||||
@@ -173,7 +193,7 @@ const ScriptBrowser = ({
|
||||
alt={script.title}
|
||||
width={16}
|
||||
height={16}
|
||||
className="rounded-full mr-1"
|
||||
className="mr-1 rounded-full"
|
||||
/>
|
||||
)}
|
||||
<span className="flex items-center gap-2">
|
||||
@@ -187,9 +207,10 @@ const ScriptBrowser = ({
|
||||
script.item_type === "VM",
|
||||
"border-yellow-500/75 text-yellow-500/75":
|
||||
script.item_type === "LXC",
|
||||
"border-none":
|
||||
script.item_type === "",
|
||||
hidden: !["VM", "LXC", ""].includes(script.item_type),
|
||||
"border-none": script.item_type === "",
|
||||
hidden: !["VM", "LXC", ""].includes(
|
||||
script.item_type,
|
||||
),
|
||||
},
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user