ns-fivem-react-boilerplate
Version:
A React boilerplate template for FiveM NUI development
789 lines (671 loc) • 21.4 kB
CSS
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import "tailwindcss";
@plugin "tailwindcss-animate";
@theme {
--color-background: #0d0d0d;
--color-primary: #ed2939;
--color-primary-50: #fbd2d6;
--color-primary-100: #f7a5ad;
--color-primary-200: #f37884;
--color-primary-300: #ef4b5b;
--color-primary-400: #eb1e32;
--color-primary-500: #ed2939;
--color-primary-600: #cd1121;
--color-primary-700: #990d18;
--color-primary-800: #650910;
--color-primary-900: #310408;
--color-primary-950: #180204;
--color-body: #f5f5f5;
--color-danger: #f8081c;
--color-danger-50: #fdbbc0;
--color-danger-100: #fca7ae;
--color-danger-200: #f9838e;
--color-danger-300: #f65f5f;
--color-danger-400: #f33b32;
--color-danger-500: #f01708;
--color-danger-600: #e70000;
--color-danger-700: #b00000;
--color-danger-800: #790000;
--color-danger-900: #420000;
--color-danger-950: #210000;
--color-success: #00dd5c;
--color-success-50: #96ffc1;
--color-success-100: #81ffb6;
--color-success-200: #58ff9e;
--color-success-300: #30ff86;
--color-success-400: #08ff6e;
--color-success-500: #00dd5c;
--color-success-600: #00a545;
--color-success-700: #006d2d;
--color-success-800: #003516;
--color-success-900: #000000;
--color-success-950: #000000;
--color-warning: #fff346;
--color-warning-50: #fffffe;
--color-warning-100: #fffee9;
--color-warning-200: #fffbc0;
--color-warning-300: #fff898;
--color-warning-400: #fff66f;
--color-warning-500: #fff346;
--color-warning-600: #ffef0d;
--color-warning-700: #d5c700;
--color-warning-800: #9d9300;
--color-warning-900: #655e00;
--color-warning-950: #494400;
--color-info: #17a1fd;
--color-info-50: #cdebff;
--color-info-100: #b9e3fe;
--color-info-200: #90d2fe;
--color-info-300: #68c2fe;
--color-info-400: #3fb1fd;
--color-info-500: #17a1fd;
--color-info-600: #0284da;
--color-info-700: #0162a2;
--color-info-800: #01406b;
--color-info-900: #001f33;
--color-info-950: #000e17;
--font-sans: "Inter", sans-serif;
--color-neutral-50: #f5f5f5;
--color-neutral-100: #e0e0e0;
--color-neutral-200: #c2c2c2;
--color-neutral-300: #a3a3a3;
--color-neutral-400: #858585;
--color-neutral-500: #666666;
--color-neutral-600: #4d4d4d;
--color-neutral-700: #333333;
--color-neutral-800: #1a1a1a;
--color-neutral-900: #0d0d0d;
--color-neutral-950: #000000;
}
:root {
/* HUD Color Palette - Enhanced Vibrant Colors */
--hud-health-low: #ff1744;
--hud-health-mid: #ff9800;
--hud-health-high: #4caf50;
--hud-armor: #2196f3;
--hud-stress: #9443ff;
--hud-thirst: #00bcd4;
--hud-hunger: #ff5722;
--hud-vocal-whisper: #00bcd4;
--hud-vocal-normal: #4caf50;
--hud-vocal-shout: #ff9800;
--hud-neutral: #607d8b;
/* HUD Base Colors */
--hud-bg-base: rgba(20, 20, 20, 0.85);
--hud-bg-hover: rgba(25, 25, 25, 0.9);
--hud-border-base: rgba(255, 255, 255, 0.15);
--hud-border-hover: rgba(255, 255, 255, 0.25);
--hud-text-primary: rgba(255, 255, 255, 0.95);
--hud-text-secondary: rgba(255, 255, 255, 0.8);
/* HUD Sizing */
--hud-icon-sm: 32px;
--hud-icon-md: 40px;
--hud-icon-lg: 48px;
--hud-border-radius: 10px;
--hud-progress-height: 3px;
--hud-ring-width: 2px;
}
@layer base {
html {
@apply font-sans text-body;
}
}
@layer components {
/* Glass in/out animations */
@keyframes glassIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes glassOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.animate-glass-in {
animation: glassIn 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.animate-glass-out {
animation: glassOut 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* Modern Glassmorphism Button Styles */
.btn {
@apply px-4 py-2 w-full max-w-xs font-bold flex justify-center items-center gap-2 cursor-pointer relative overflow-hidden;
/* Glassmorphism effect matching inventory-slot-modern */
background: rgba(17, 17, 17, 0.4);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
/* Modern shadow matching inventory-slot-modern */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
/* Smooth transitions */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* Text color */
color: rgba(255, 255, 255, 0.9);
}
.btn::before {
content: "";
@apply absolute inset-0 pointer-events-none;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.02) 50%,
rgba(255, 255, 255, 0.08) 100%
);
border-radius: 12px;
opacity: 0.6;
}
.btn:hover {
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(255, 255, 255, 0.1);
}
.btn:active {
transform: translateY(0px) scale(0.95);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.btn:disabled:hover {
transform: none;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.btn-full-width {
@apply w-full max-w-none;
}
/* Color variants with glassmorphism */
.btn-primary {
background: rgba(237, 41, 57, 0.15);
border-color: rgba(237, 41, 57, 0.3);
color: rgba(237, 41, 57, 0.95);
}
.btn-primary::before {
background: linear-gradient(
135deg,
rgba(237, 41, 57, 0.2) 0%,
rgba(237, 41, 57, 0.05) 50%,
rgba(237, 41, 57, 0.15) 100%
);
}
.btn-primary:hover {
background: rgba(237, 41, 57, 0.25);
border-color: rgba(237, 41, 57, 0.5);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(237, 41, 57, 0.3);
}
.btn-success {
background: rgba(0, 221, 92, 0.15);
border-color: rgba(0, 221, 92, 0.3);
color: rgba(0, 221, 92, 0.95);
}
.btn-success::before {
background: linear-gradient(
135deg,
rgba(0, 221, 92, 0.2) 0%,
rgba(0, 221, 92, 0.05) 50%,
rgba(0, 221, 92, 0.15) 100%
);
}
.btn-success:hover {
background: rgba(0, 221, 92, 0.25);
border-color: rgba(0, 221, 92, 0.5);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(0, 221, 92, 0.3);
}
.btn-warning {
background: rgba(255, 243, 70, 0.15);
border-color: rgba(255, 243, 70, 0.3);
color: rgba(255, 243, 70, 0.95);
}
.btn-warning::before {
background: linear-gradient(
135deg,
rgba(255, 243, 70, 0.2) 0%,
rgba(255, 243, 70, 0.05) 50%,
rgba(255, 243, 70, 0.15) 100%
);
}
.btn-warning:hover {
background: rgba(255, 243, 70, 0.25);
border-color: rgba(255, 243, 70, 0.5);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(255, 243, 70, 0.3);
}
.btn-danger {
background: rgba(248, 8, 28, 0.15);
border-color: rgba(248, 8, 28, 0.3);
color: rgba(248, 8, 28, 0.95);
}
.btn-danger::before {
background: linear-gradient(
135deg,
rgba(248, 8, 28, 0.2) 0%,
rgba(248, 8, 28, 0.05) 50%,
rgba(248, 8, 28, 0.15) 100%
);
}
.btn-danger:hover {
background: rgba(248, 8, 28, 0.25);
border-color: rgba(248, 8, 28, 0.5);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(248, 8, 28, 0.3);
}
.btn-neutral {
background: rgba(115, 115, 115, 0.15);
border-color: rgba(115, 115, 115, 0.3);
color: rgba(245, 245, 245, 0.9);
}
.btn-neutral::before {
background: linear-gradient(
135deg,
rgba(115, 115, 115, 0.2) 0%,
rgba(115, 115, 115, 0.05) 50%,
rgba(115, 115, 115, 0.15) 100%
);
}
.btn-neutral:hover {
background: rgba(115, 115, 115, 0.25);
border-color: rgba(115, 115, 115, 0.5);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(115, 115, 115, 0.3);
}
/* Icon-only button variants */
.btn-icon {
@apply w-10 h-10 p-0 flex items-center justify-center min-w-0 max-w-none;
border-radius: 10px;
}
.btn-icon-sm {
@apply w-8 h-8 p-0 flex items-center justify-center min-w-0 max-w-none;
border-radius: 8px;
}
.btn-icon-lg {
@apply w-12 h-12 p-0 flex items-center justify-center min-w-0 max-w-none;
border-radius: 14px;
}
.divider-hor {
@apply h-px w-50 bg-neutral-700 my-4;
}
.divider-ver {
@apply h-50 w-px bg-neutral-700 my-4;
}
.input {
@apply p-2 w-full border-b rounded-t-md bg-transparent shadow-xl shadow-transparent border-neutral-500 placeholder:text-neutral-500 transition-all duration-300;
}
.input:focus {
@apply outline-none bg-neutral-900/60 shadow-primary/10 border-primary;
}
input[type="text"]::placeholder,
input[type="number"]::placeholder {
color: #808080;
opacity: 0.5;
}
.select {
@apply appearance-none w-full p-2 pr-8 border rounded text-neutral-200 bg-neutral-900 border-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent transition-all duration-300;
}
.select option {
@apply bg-neutral-900 text-neutral-200;
}
.textarea {
@apply p-2 w-full border rounded bg-transparent border-neutral-700 placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent transition-all duration-300;
}
.radio {
@apply appearance-none w-5 h-5 border shadow-md shadow-transparent rounded-full bg-transparent border-neutral-700 focus:outline-none focus:border-transparent hover:border-primary/70 transition-all duration-300 cursor-pointer relative;
}
.radio:checked {
@apply border-primary bg-primary/20 shadow-primary/30;
}
.radio:checked::before {
content: "";
@apply absolute w-2.5 h-2.5 bg-primary rounded-full;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.radio:disabled {
@apply bg-neutral-900/60 cursor-not-allowed border-danger/50;
}
.radio:disabled:checked {
@apply cursor-not-allowed border-danger/50;
}
.radio:disabled:checked::before {
@apply bg-danger cursor-not-allowed;
}
/* Checkbox custom styles */
.checkbox-custom {
@apply appearance-none w-5 h-5 border shadow-md shadow-transparent rounded bg-transparent border-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent hover:border-primary/70 transition-all duration-300 cursor-pointer relative;
}
.checkbox-custom:checked {
@apply border-primary bg-primary/20 shadow-primary/30;
}
.checkbox-custom:checked::after {
content: "✓";
@apply absolute text-primary text-sm font-bold;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
line-height: 1;
}
/* Otp styles */
.otp-container {
@apply flex flex-col gap-2 items-center justify-center;
}
.otp-group {
@apply flex gap-2 items-center justify-center;
}
.otp-input {
@apply w-12 h-12 text-center shadow-xl shadow-transparent text-xl font-bold border rounded bg-transparent border-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent transition-all duration-300;
}
.otp-input:focus {
@apply outline-none bg-neutral-900/60 shadow-primary/10;
}
.otp-input:disabled {
@apply bg-neutral-900/60 cursor-not-allowed border-danger/50;
}
.otp-input:read-only {
@apply bg-neutral-900/60 cursor-not-allowed;
}
/* Textarea styles */
.textarea {
@apply p-2 w-full border rounded bg-transparent shadow-xl shadow-transparent border-neutral-700 placeholder:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-transparent transition-all duration-300;
}
.textarea:focus {
@apply outline-none bg-neutral-900/60 shadow-primary/10;
}
/* Modal styles */
.modal-overlay {
@apply fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm;
}
.modal-content {
@apply bg-neutral-900 rounded-lg p-6 w-full max-w-md mx-4 border border-neutral-700 shadow-2xl;
}
.modal-header {
@apply flex justify-between items-center mb-4;
}
.modal-body {
@apply text-neutral-200 leading-relaxed;
}
/* Modern Glassmorphism Card Styles */
.card {
@apply w-full max-w-md mx-4 relative overflow-hidden;
/* Glassmorphism effect matching inventory-slot-modern */
background: rgba(17, 17, 17, 0.712);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
/* Modern shadow matching inventory-slot-modern */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
/* Smooth transitions */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card::before {
content: "";
@apply absolute inset-0 pointer-events-none;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.02) 50%,
rgba(255, 255, 255, 0.08) 100%
);
border-radius: 12px;
opacity: 0.6;
}
.card:hover {
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(255, 255, 255, 0.1);
}
.card-header {
@apply flex justify-between items-center p-4 border-b relative z-10;
border-color: rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
border-radius: 12px 12px 0 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-header:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
}
.card-header.card-primary {
background: rgba(237, 41, 57, 0.08);
border-color: rgba(237, 41, 57, 0.15);
}
.card-header.card-primary:hover {
background: rgba(237, 41, 57, 0.12);
border-color: rgba(237, 41, 57, 0.25);
}
.card-header.card-success {
background: rgba(0, 221, 92, 0.08);
border-color: rgba(0, 221, 92, 0.15);
}
.card-header.card-success:hover {
background: rgba(0, 221, 92, 0.12);
border-color: rgba(0, 221, 92, 0.25);
}
.card-header.card-warning {
background: rgba(255, 243, 70, 0.08);
border-color: rgba(255, 243, 70, 0.15);
}
.card-header.card-warning:hover {
background: rgba(255, 243, 70, 0.12);
border-color: rgba(255, 243, 70, 0.25);
}
.card-header.card-danger {
background: rgba(248, 8, 28, 0.08);
border-color: rgba(248, 8, 28, 0.15);
}
.card-header.card-danger:hover {
background: rgba(248, 8, 28, 0.12);
border-color: rgba(248, 8, 28, 0.25);
}
.card-header.card-info {
background: rgba(23, 161, 253, 0.08);
border-color: rgba(23, 161, 253, 0.15);
}
.card-header.card-info:hover {
background: rgba(23, 161, 253, 0.12);
border-color: rgba(23, 161, 253, 0.25);
}
.card-body {
@apply text-neutral-200 leading-relaxed p-4 relative z-10;
background: rgba(255, 255, 255, 0.01);
border-radius: 0 0 12px 12px;
}
.card-title {
@apply text-2xl font-bold flex items-center gap-2 relative z-10;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.card-title.card-primary {
color: rgba(237, 41, 57, 0.95);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(237, 41, 57, 0.3);
}
.card-title.card-success {
color: rgba(0, 221, 92, 0.95);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 221, 92, 0.3);
}
.card-title.card-warning {
color: rgba(255, 243, 70, 0.95);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 243, 70, 0.3);
}
.card-title.card-danger {
color: rgba(248, 8, 28, 0.95);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(248, 8, 28, 0.3);
}
.card-title.card-info {
color: rgba(23, 161, 253, 0.95);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 10px rgba(23, 161, 253, 0.3);
}
.card-text {
@apply text-neutral-200 leading-relaxed relative z-10;
color: rgba(255, 255, 255, 0.85);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* Accordion styles */
.accordion {
@apply w-full flex flex-col gap-4;
}
.accordion-item {
@apply rounded-lg w-full shadow-2xl;
}
.accordion-header {
@apply flex justify-between items-center bg-neutral-500/10 rounded-t-lg p-4 border-b border-neutral-700 cursor-pointer hover:bg-neutral-500/50 transition-all duration-300;
}
.accordion-title {
@apply text-2xl font-bold flex items-center gap-2 select-none;
}
.accordion-content {
@apply border-b border-l border-r rounded-b-lg border-neutral-700;
padding: 0;
overflow: hidden;
}
/* Wrapper interno per il contenuto con padding fisso */
.accordion-content-inner {
@apply text-neutral-200 leading-relaxed p-4;
transform: translateY(-100%);
opacity: 0;
transition: all 300ms ease-out;
}
/* Accordion aperto - animazione fluida del contenuto interno */
.accordion-item.open .accordion-content-inner {
transform: translateY(0);
opacity: 1;
}
.divider-hor {
@apply my-1 mx-2;
height: 1px;
margin: 0 8px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.15) 20%,
rgba(255, 255, 255, 0.15) 80%,
transparent 100%
);
}
.glass {
@apply overflow-hidden relative;
/* Glassmorphism effect */
background: rgba(17, 17, 17, 0.459);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px ;
/* Modern shadow */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.glass::before {
content: "";
@apply absolute inset-0 pointer-events-none;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.02) 50%,
rgba(255, 255, 255, 0.08) 100%
);
border-radius: 12px;
opacity: 0.6;
}
.glass-primary {
@apply overflow-hidden relative;
/* Glassmorphism effect */
background: rgba(17, 17, 17, 0.459);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px ;
/* Modern shadow */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
.glass-primary::before {
@apply absolute inset-0 pointer-events-none;
background: linear-gradient(
135deg,
rgba(237, 41, 57, 0.3) 0%,
rgba(237, 41, 57, 0.06) 50%,
rgba(237, 41, 57, 0.24) 100%
);
border-radius: 12px;
opacity: 0.6;
}
@keyframes glass-reflect {
0% {
transform: translateX(-100%) skewX(-15deg);
opacity: 0;
}
10% {
opacity: 1;
}
20% {
transform: translateX(100%) skewX(-15deg);
opacity: 1;
}
25% {
opacity: 0;
}
100% {
transform: translateX(100%) skewX(-15deg);
opacity: 0;
}
}
/* Developer panel button styles */
.btn-dev {
@apply px-2 py-1 text-xs font-medium rounded border transition-all duration-200 cursor-pointer;
background: rgba(31, 41, 55, 0.8);
border-color: rgba(75, 85, 99, 0.6);
color: rgba(229, 231, 235, 0.9);
}
.btn-dev:hover {
background: rgba(55, 65, 81, 0.9);
border-color: rgba(107, 114, 128, 0.8);
transform: translateY(-1px);
}
.btn-dev.btn-active {
background: rgba(59, 130, 246, 0.8);
border-color: rgba(59, 130, 246, 1);
color: white;
box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}
.btn-dev.btn-secondary {
background: rgba(75, 85, 99, 0.6);
border-color: rgba(107, 114, 128, 0.4);
}
.btn-dev.btn-danger {
background: rgba(220, 38, 38, 0.8);
border-color: rgba(220, 38, 38, 1);
color: white;
}
.btn-dev.btn-danger:hover {
background: rgba(239, 68, 68, 0.9);
box-shadow: 0 0 10px rgba(220, 38, 38, 0.4);
}
.btn-dev.btn-success {
background: rgba(34, 197, 94, 0.8);
border-color: rgba(34, 197, 94, 1);
color: white;
}
.btn-dev.btn-success:hover {
background: rgba(74, 222, 128, 0.9);
box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}
}
input[type="number"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Nasconde le frecce negli input di tipo numero per Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}