chore: update
This commit is contained in:
@@ -30,8 +30,8 @@
|
||||
|
||||
/* Modal Content */
|
||||
.items-modal-content {
|
||||
background: linear-gradient(to bottom, #1a1a1a, #0f0f0f);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: linear-gradient(to bottom, var(--surface), var(--bg));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
@@ -62,8 +62,8 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem 2rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface-2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
color: #ffffff;
|
||||
color: var(--text);
|
||||
font-size: 1.25rem;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
@@ -102,7 +102,7 @@
|
||||
.items-modal-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #6b7280;
|
||||
color: var(--text-muted);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 8px;
|
||||
@@ -117,8 +117,8 @@
|
||||
}
|
||||
|
||||
.items-modal-close:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #ffffff;
|
||||
background: var(--surface-2);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Body */
|
||||
@@ -126,7 +126,7 @@
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
background: #0a0a0a;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.items-modal-body::-webkit-scrollbar {
|
||||
@@ -153,19 +153,19 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4rem 2rem;
|
||||
color: #6b7280;
|
||||
color: var(--text-muted);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.items-modal-empty svg {
|
||||
color: #374151;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.items-modal-empty p {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
color: #9ca3af;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Summary */
|
||||
@@ -181,14 +181,14 @@
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.summary-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: var(--surface-2);
|
||||
border-color: rgba(124, 58, 237, 0.3);
|
||||
}
|
||||
|
||||
@@ -199,7 +199,7 @@
|
||||
}
|
||||
|
||||
.summary-item span {
|
||||
color: #ffffff;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
@@ -207,7 +207,7 @@
|
||||
|
||||
.summary-item::before {
|
||||
content: attr(data-label);
|
||||
color: #9ca3af;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
@@ -224,8 +224,8 @@
|
||||
|
||||
/* Item Card */
|
||||
.items-modal-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.2s ease;
|
||||
@@ -234,7 +234,7 @@
|
||||
}
|
||||
|
||||
.items-modal-card:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: var(--surface-2);
|
||||
border-color: rgba(124, 58, 237, 0.4);
|
||||
box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
|
||||
}
|
||||
@@ -271,7 +271,7 @@
|
||||
}
|
||||
|
||||
.item-name {
|
||||
color: #f9fafb;
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
@@ -325,7 +325,7 @@
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
color: #9ca3af;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
@@ -333,7 +333,7 @@
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
color: #f9fafb;
|
||||
color: var(--text);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -350,11 +350,11 @@
|
||||
gap: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.item-id {
|
||||
color: #6b7280;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8125rem;
|
||||
font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
|
||||
}
|
||||
@@ -372,7 +372,7 @@
|
||||
}
|
||||
|
||||
.items-modal-total span {
|
||||
color: #9ca3af;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
@@ -525,13 +525,13 @@
|
||||
/* Touch Devices */
|
||||
@media (hover: none) {
|
||||
.items-modal-card:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--surface);
|
||||
border-color: var(--border);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.summary-item:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
background: var(--surface);
|
||||
border-color: var(--border);
|
||||
}
|
||||
}
|
||||
@@ -20,6 +20,24 @@
|
||||
--transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Light theme overrides
|
||||
============================================================ */
|
||||
[data-theme="light"] {
|
||||
--bg: #f4f4f8;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #ebebf2;
|
||||
--border: rgba(0, 0, 0, 0.08);
|
||||
--primary: #7c3aed;
|
||||
--primary-soft: rgba(124, 58, 237, 0.08);
|
||||
--primary-glow: rgba(124, 58, 237, 0.18);
|
||||
--cyan: #0891b2;
|
||||
--cyan-soft: rgba(8, 145, 178, 0.1);
|
||||
--red: #dc2626;
|
||||
--text: #18181b;
|
||||
--text-muted: #52525b;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Body offset
|
||||
============================================================ */
|
||||
@@ -41,11 +59,11 @@ body {
|
||||
align-items: center;
|
||||
padding: 0 0.75rem;
|
||||
gap: 0.5rem;
|
||||
background: rgba(9, 9, 11, 0.92);
|
||||
background: color-mix(in srgb, var(--bg) 92%, transparent);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
box-shadow: 0 1px 24px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 1px 24px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.topbar-toggle {
|
||||
@@ -91,6 +109,33 @@ body {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
/* ── Theme toggle button ── */
|
||||
.topbar-theme-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-muted);
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.topbar-theme-btn:hover {
|
||||
background: var(--surface-2);
|
||||
border-color: var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.topbar-theme-btn:active {
|
||||
transform: scale(0.93);
|
||||
}
|
||||
|
||||
/* ── Icon button (notif / cart) ── */
|
||||
.topbar-icon-btn {
|
||||
position: relative;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { useCart } from "../context/useCart";
|
||||
import { useTheme } from "../context/ThemeContext";
|
||||
import "./Navbar.css";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
@@ -15,6 +16,8 @@ import {
|
||||
faBell,
|
||||
faGift,
|
||||
faUserCircle,
|
||||
faSun,
|
||||
faMoon,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { faTelegram } from "@fortawesome/free-brands-svg-icons";
|
||||
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
||||
@@ -29,6 +32,7 @@ interface MenuItem {
|
||||
}
|
||||
|
||||
function Navbar() {
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
|
||||
const [isLoggingOut, setIsLoggingOut] = useState<boolean>(false);
|
||||
const [notifications, setNotifications] = useState<ClientNotification[]>([]);
|
||||
@@ -155,6 +159,15 @@ function Navbar() {
|
||||
<span className="topbar-brand">Milieu‑Nantais</span>
|
||||
|
||||
<div className="topbar-actions">
|
||||
{/* Theme toggle */}
|
||||
<button
|
||||
className="topbar-theme-btn"
|
||||
onClick={toggleTheme}
|
||||
aria-label={theme === "dark" ? "Passer en mode clair" : "Passer en mode sombre"}
|
||||
>
|
||||
<FontAwesomeIcon icon={theme === "dark" ? faSun : faMoon} />
|
||||
</button>
|
||||
|
||||
{/* Notifications */}
|
||||
<div className="notif-wrapper" ref={notifPanelRef}>
|
||||
<button
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.product-card {
|
||||
background-color: #1a1a1a;
|
||||
background-color: var(--surface);
|
||||
border: 2px solid var(--category-color, white);
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
.product-card:active {
|
||||
transform: scale(0.97);
|
||||
background-color: #2a2a2a;
|
||||
background-color: var(--surface-2);
|
||||
}
|
||||
|
||||
.product-card-content {
|
||||
@@ -30,7 +30,7 @@
|
||||
.product-image-container {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
background-color: #2a2a2a;
|
||||
background-color: var(--surface-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -78,12 +78,12 @@
|
||||
|
||||
.product-info {
|
||||
padding: clamp(0.8rem, 3vw, 1.2rem);
|
||||
background-color: #1a1a1a;
|
||||
border-top: 1px solid #333;
|
||||
background-color: var(--surface);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.product-name {
|
||||
color: white;
|
||||
color: var(--text);
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: clamp(1rem, 3.5vw, 1.2rem);
|
||||
font-weight: 600;
|
||||
@@ -99,18 +99,18 @@
|
||||
}
|
||||
|
||||
.product-stock {
|
||||
color: #cccccc;
|
||||
color: var(--text-muted);
|
||||
font-size: clamp(0.85rem, 2.5vw, 1rem);
|
||||
text-align: center;
|
||||
padding: clamp(0.6rem, 2vw, 0.8rem);
|
||||
background-color: #0a0a0a;
|
||||
border-top: 1px solid #333;
|
||||
background-color: var(--bg);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.quick-add-section {
|
||||
padding: clamp(0.8rem, 3vw, 1rem);
|
||||
background-color: #0a0a0a;
|
||||
border-top: 1px solid #333;
|
||||
background-color: var(--bg);
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
@@ -224,8 +224,8 @@ div[data-category="gros&semi"] .quick-add-btn:active {
|
||||
.quantity-select {
|
||||
width: 100%;
|
||||
padding: clamp(0.7rem, 2.5vw, 0.9rem);
|
||||
background-color: #2a2a2a;
|
||||
color: white;
|
||||
background-color: var(--surface-2);
|
||||
color: var(--text);
|
||||
border: 2px solid #4ade80;
|
||||
border-radius: 8px;
|
||||
font-size: clamp(0.9rem, 3vw, 1.05rem);
|
||||
@@ -241,7 +241,7 @@ div[data-category="gros&semi"] .quick-add-btn:active {
|
||||
|
||||
.quantity-select:hover {
|
||||
border-color: #22c55e;
|
||||
background-color: #333;
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
.quantity-select:focus {
|
||||
@@ -260,7 +260,7 @@ div[data-category="weed&hash"] .quantity-select {
|
||||
|
||||
div[data-category="weed&hash"] .quantity-select:hover {
|
||||
border-color: #059669;
|
||||
background-color: #333;
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
div[data-category="weed&hash"] .quantity-select:focus {
|
||||
@@ -276,7 +276,7 @@ div[data-category="tous"] .quantity-select {
|
||||
|
||||
div[data-category="tous"] .quantity-select:hover {
|
||||
border-color: #7e22ce;
|
||||
background-color: #333;
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
div[data-category="tous"] .quantity-select:focus {
|
||||
@@ -292,7 +292,7 @@ div[data-category="zipette&co"] .quantity-select {
|
||||
|
||||
div[data-category="zipette&co"] .quantity-select:hover {
|
||||
border-color: #e8e8e0;
|
||||
background-color: #333;
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
div[data-category="zipette&co"] .quantity-select:focus {
|
||||
@@ -308,7 +308,7 @@ div[data-category="gros&semi"] .quantity-select {
|
||||
|
||||
div[data-category="gros&semi"] .quantity-select:hover {
|
||||
border-color: #0ea5e9;
|
||||
background-color: #333;
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
div[data-category="gros&semi"] .quantity-select:focus {
|
||||
@@ -317,8 +317,8 @@ div[data-category="gros&semi"] .quantity-select:focus {
|
||||
}
|
||||
|
||||
.quantity-select option {
|
||||
background-color: #2a2a2a;
|
||||
color: white;
|
||||
background-color: var(--surface-2);
|
||||
color: var(--text);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
@@ -706,7 +706,7 @@ div[data-category="gros&semi"] .details-button:hover {
|
||||
@media (hover: none) {
|
||||
.product-card:hover {
|
||||
transform: none;
|
||||
background-color: #1a1a1a;
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
.quick-add-btn:hover {
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
max-height: 90vh;
|
||||
background: linear-gradient(135deg, rgba(20, 20, 25, 0.98), rgba(15, 15, 20, 0.98));
|
||||
background: linear-gradient(135deg, var(--surface), var(--bg));
|
||||
border: 1px solid rgba(124, 58, 237, 0.3);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(124, 58, 237, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
||||
@@ -67,8 +67,8 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.8rem 2rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(109, 40, 217, 0.04));
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--primary-soft);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
color: white;
|
||||
color: var(--text);
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
@@ -92,7 +92,7 @@
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
margin: 0.3rem 0 0 0;
|
||||
font-weight: 500;
|
||||
@@ -102,12 +102,12 @@
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
flex-shrink: 0;
|
||||
@@ -128,7 +128,7 @@
|
||||
overflow-y: auto;
|
||||
padding: 2rem;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(124, 58, 237, 0.4) rgba(255, 255, 255, 0.05);
|
||||
scrollbar-color: rgba(124, 58, 237, 0.4) var(--surface-2);
|
||||
}
|
||||
|
||||
.modal-content::-webkit-scrollbar {
|
||||
@@ -136,7 +136,7 @@
|
||||
}
|
||||
|
||||
.modal-content::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: var(--surface-2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@@ -331,8 +331,8 @@
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
@@ -345,7 +345,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
color: white;
|
||||
color: var(--text);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
@@ -358,7 +358,7 @@
|
||||
}
|
||||
|
||||
.detail-description {
|
||||
color: #aaa;
|
||||
color: var(--text-muted);
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
@@ -403,8 +403,8 @@
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.8rem 1.2rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -415,7 +415,7 @@
|
||||
|
||||
.quantity-value,
|
||||
.amount-value {
|
||||
color: white;
|
||||
color: var(--text);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -435,7 +435,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
color: #aaa;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -445,13 +445,13 @@
|
||||
}
|
||||
|
||||
.date-text {
|
||||
color: #aaa;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
color: #666;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -460,8 +460,8 @@
|
||||
FORM SECTIONS (Create & Edit Modals)
|
||||
============================================ */
|
||||
.form-section {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
@@ -472,7 +472,7 @@
|
||||
}
|
||||
|
||||
.form-section h3 {
|
||||
color: white;
|
||||
color: var(--text);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 1.2rem 0;
|
||||
@@ -526,7 +526,7 @@
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
color: white;
|
||||
color: var(--text);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.6rem;
|
||||
@@ -539,10 +539,10 @@
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.9rem 1.2rem;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
color: var(--text);
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-family: inherit;
|
||||
@@ -552,7 +552,7 @@
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
|
||||
background: var(--surface);
|
||||
border-color: rgba(124, 58, 237, 0.5);
|
||||
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
|
||||
}
|
||||
@@ -602,7 +602,7 @@
|
||||
}
|
||||
|
||||
.price-input-group label {
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
@@ -708,8 +708,8 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.8rem 1.2rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
@@ -727,13 +727,13 @@
|
||||
}
|
||||
|
||||
.file-name {
|
||||
color: white;
|
||||
color: var(--text);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@@ -772,8 +772,8 @@
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: var(--surface-2);
|
||||
border: 1px solid var(--border);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@@ -859,8 +859,8 @@
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 2rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -888,15 +888,15 @@
|
||||
}
|
||||
|
||||
.action-button.secondary {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
|
||||
border-color: rgba(255, 255, 255, 0.08);
|
||||
color: #888;
|
||||
background: var(--surface-2);
|
||||
border-color: var(--border);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.action-button.secondary:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
color: white;
|
||||
background: var(--surface);
|
||||
border-color: var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.action-button:disabled {
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
line-height: 1.5;
|
||||
flex: 1;
|
||||
letter-spacing: 0.1px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.toast-progress {
|
||||
|
||||
Reference in New Issue
Block a user