mirror of
https://github.com/coaidev/coai.git
synced 2025-05-29 01:40:17 +09:00
feat: update quota amount wrapper style
This commit is contained in:
parent
07e2d887c8
commit
f5ce4b985b
@ -8,7 +8,7 @@
|
|||||||
},
|
},
|
||||||
"package": {
|
"package": {
|
||||||
"productName": "chatnio",
|
"productName": "chatnio",
|
||||||
"version": "3.10.6"
|
"version": "3.10.7"
|
||||||
},
|
},
|
||||||
"tauri": {
|
"tauri": {
|
||||||
"allowlist": {
|
"allowlist": {
|
||||||
|
@ -9,19 +9,13 @@
|
|||||||
padding: 16px 0;
|
padding: 16px 0;
|
||||||
gap: 36px;
|
gap: 36px;
|
||||||
|
|
||||||
@media (max-width: 820px) {
|
|
||||||
& {
|
|
||||||
width: min-content;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.interface-item {
|
.interface-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
|
width: 100%;
|
||||||
max-width: calc(90vw - 3rem);
|
max-width: calc(90vw - 3rem);
|
||||||
margin: 0.5rem auto;
|
margin: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -36,15 +30,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.quota-dialog {
|
.quota-dialog {
|
||||||
max-width: min(90vw, 844px) !important;
|
max-width: min(90vw, 680px) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.amount-container {
|
.amount-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
width: max-content;
|
width: 100%;
|
||||||
max-width: 100%;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -99,17 +92,26 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.amount-wrapper {
|
.amount-wrapper {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 460px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
.amount {
|
.amount {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 12px 32px;
|
padding: 0.75rem 0.75rem;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -119,36 +121,19 @@
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
min-width: 100px;
|
min-width: 7.5rem;
|
||||||
|
width: 100%;
|
||||||
transition: .1s linear;
|
transition: .1s linear;
|
||||||
|
text-align: center;
|
||||||
@media (max-width: 360px) {
|
|
||||||
& {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
scale: 1 !important;
|
|
||||||
border-color: hsl(var(--text-secondary)) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.amount-title {
|
|
||||||
font-size: 16px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
border-color: hsl(var(--border-hover));
|
background: hsl(var(--input));
|
||||||
scale: 1.05;
|
border-color: hsl(var(--text-secondary));
|
||||||
|
|
||||||
.amount-desc,
|
.amount-desc,
|
||||||
.other {
|
.other {
|
||||||
color: hsl(var(--text));
|
color: hsl(var(--text));
|
||||||
}
|
}
|
||||||
|
|
||||||
.amount-title {
|
|
||||||
font-size: 17px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.amount-title {
|
.amount-title {
|
||||||
|
@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
|
|||||||
<DialogPrimitive.Content
|
<DialogPrimitive.Content
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-[90vw] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-[90vw] md:max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
@ -7,7 +7,7 @@ import {
|
|||||||
import { syncSiteInfo } from "@/admin/api/info.ts";
|
import { syncSiteInfo } from "@/admin/api/info.ts";
|
||||||
import { setAxiosConfig } from "@/conf/api.ts";
|
import { setAxiosConfig } from "@/conf/api.ts";
|
||||||
|
|
||||||
export const version = "3.10.6"; // version of the current build
|
export const version = "3.10.7"; // version of the current build
|
||||||
export const dev: boolean = getDev(); // is in development mode (for debugging, in localhost origin)
|
export const dev: boolean = getDev(); // is in development mode (for debugging, in localhost origin)
|
||||||
export const deploy: boolean = true; // is production environment (for api endpoint)
|
export const deploy: boolean = true; // is production environment (for api endpoint)
|
||||||
export const tokenField = getTokenField(deploy); // token field name for storing token
|
export const tokenField = getTokenField(deploy); // token field name for storing token
|
||||||
|
@ -37,7 +37,7 @@ function InvitationDialog() {
|
|||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<DialogFooter>
|
<DialogFooter>
|
||||||
<Button variant={`outline`} onClick={() => dispatch(closeDialog())}>
|
<Button className={`mt-2 sm:mt-0`} variant={`outline`} onClick={() => dispatch(closeDialog())}>
|
||||||
{t("invitation.cancel")}
|
{t("invitation.cancel")}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
|
@ -334,7 +334,7 @@ function QuotaDialog() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={`tip flex-row items-center justify-center mt-8 mb-4`}
|
className={`tip flex-row items-center justify-center mt-4 mb-4`}
|
||||||
>
|
>
|
||||||
{buyLink && buyLink.length > 0 && (
|
{buyLink && buyLink.length > 0 && (
|
||||||
<Button asChild>
|
<Button asChild>
|
||||||
|
Loading…
Reference in New Issue
Block a user