antv
320 lines
9.4 KiB
CSS
320 lines
9.4 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap');
|
|
|
|
@font-face {
|
|
font-family: 'SVN-Poppins-Regular';
|
|
src: url('/fonts/FZ Poppins-Regular.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'SVN-Poppins-Medium';
|
|
src: url('/fonts/FZ Poppins-Medium.ttf') format('truetype');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'SVN-Poppins-SemiBold';
|
|
src: url('/fonts/FZ Poppins-SemiBold.ttf') format('truetype');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'SVN-Poppins';
|
|
src: url('/fonts/FZ Poppins-Regular.ttf') format('truetype');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'SVN-Poppins';
|
|
src: url('/fonts/FZ Poppins-Medium.ttf') format('truetype');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'SVN-Poppins';
|
|
src: url('/fonts/FZ Poppins-SemiBold.ttf') format('truetype');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'SVN-Poppins';
|
|
src: url('/fonts/FZ Poppins-Bold.ttf') format('truetype');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
@import "@fontsource/roboto/300.css";
|
|
@import "@fontsource/roboto/400.css";
|
|
@import "@fontsource/roboto/500.css";
|
|
@import "@fontsource/roboto/700.css";
|
|
@import 'tailwindcss';
|
|
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../storage/framework/views/*.php';
|
|
@source '../**/*.blade.php';
|
|
@source '../**/*.js';
|
|
@source inline('bg-primary-light/35 ring-primary/20 border-primary ring-2 animate-pulse');
|
|
|
|
@theme {
|
|
--font-sans: 'SVN-Poppins', 'SVN-Poppins-SemiBold', 'SVN-Poppins-Regular', 'SVN-Poppins-Medium', 'Roboto', 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
|
|
--color-primary: #0f4c81;
|
|
--color-primary-hover: #0a3356;
|
|
--color-primary-light: #e8f0fe;
|
|
--color-secondary: #ef222e;
|
|
--color-success: #2e7d32;
|
|
--color-warning: #ed6c02;
|
|
--color-info: #0288d1;
|
|
|
|
--color-bg-main: #FAFBFF;
|
|
--color-bg-sidebar: #ffffff;
|
|
--color-bg-card: #ffffff;
|
|
--color-bg-card-soft: #eef2f6;
|
|
|
|
--color-border-light: #e2e8f0;
|
|
--color-border-medium: #cbd5e1;
|
|
|
|
--color-text-dark: #1e293b;
|
|
--color-text-medium: #475569;
|
|
--color-text-light: #64748b;
|
|
--color-text-muted: #94a3b8;
|
|
|
|
--color-calendar-header: #4b729f;
|
|
|
|
--color-terminal-bg: #263238;
|
|
--color-terminal-base: #b0bec5;
|
|
--color-terminal-accent: #90a4ae;
|
|
|
|
--shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
|
|
--shadow-sidebar: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow-header: 0 2px 4px 0 rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-bg-main text-text-dark antialiased;
|
|
}
|
|
}
|
|
|
|
.app-layout {
|
|
@apply min-h-screen flex bg-bg-main;
|
|
}
|
|
|
|
.sidebar {
|
|
@apply w-60 h-screen sticky top-0 bg-bg-sidebar border-r border-border-light flex flex-col justify-between shrink-0 shadow-sidebar transition-all duration-300 overflow-hidden;
|
|
}
|
|
|
|
.main-content {
|
|
@apply flex-1 flex flex-col min-w-0;
|
|
}
|
|
|
|
.top-header {
|
|
@apply h-16 bg-bg-sidebar border-b border-border-light flex items-center justify-between px-6 shadow-header;
|
|
}
|
|
|
|
.sidebar-link {
|
|
@apply flex items-center gap-3 px-4 py-3 text-text-medium text-sm font-medium rounded-lg hover:bg-gray-50 hover:text-primary transition-all duration-200;
|
|
}
|
|
|
|
.sidebar-link-active {
|
|
@apply text-primary bg-primary-light font-bold;
|
|
}
|
|
|
|
.card-stat {
|
|
@apply bg-bg-card-soft text-primary p-5 rounded-lg border border-transparent shadow-card relative overflow-hidden transition-all duration-200 hover:shadow-md;
|
|
}
|
|
|
|
.card-stat-active {
|
|
@apply bg-primary text-white p-5 rounded-lg border border-transparent shadow-card relative overflow-hidden transition-all duration-200 hover:shadow-md;
|
|
}
|
|
|
|
.card-stat::after, .card-stat-active::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -20px;
|
|
bottom: -20px;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(15, 76, 129, 0.05) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card-stat-active::after {
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
|
}
|
|
|
|
.calendar-card {
|
|
@apply bg-bg-card rounded-lg shadow-card border border-border-light overflow-hidden;
|
|
}
|
|
|
|
.calendar-header {
|
|
@apply grid grid-cols-7 bg-calendar-header text-white font-bold text-center py-3;
|
|
}
|
|
|
|
.calendar-grid {
|
|
@apply grid grid-cols-7 border-t border-l border-border-light;
|
|
}
|
|
|
|
.calendar-day {
|
|
@apply bg-bg-card border-r border-b border-border-light min-h-[100px] p-2 flex flex-col justify-between transition-colors duration-150 hover:bg-gray-50;
|
|
}
|
|
|
|
.calendar-day-weekend {
|
|
@apply bg-gray-50;
|
|
}
|
|
|
|
/* --- FORM DESIGN SYSTEM --- */
|
|
.form-container {
|
|
@apply w-full max-w-[1100px] mx-auto bg-white rounded-xl shadow-sm border border-[#d9dfe7] overflow-hidden;
|
|
}
|
|
|
|
.form-header {
|
|
@apply px-6 py-6 sm:px-8 sm:py-8 border-b border-[#d9dfe7] flex items-center justify-between;
|
|
}
|
|
|
|
.form-header-title {
|
|
@apply text-sm font-[600] text-text-dark leading-tight;
|
|
}
|
|
|
|
.form-body {
|
|
@apply p-6 sm:p-8; /* 32px top/bottom card padding */
|
|
}
|
|
|
|
.form-group {
|
|
@apply mb-6 relative; /* 24px gap */
|
|
}
|
|
|
|
.form-label {
|
|
@apply block text-[14px] font-[600] text-text-dark mb-2; /* 8px label gap */
|
|
}
|
|
|
|
/* Standard Input & Select */
|
|
.form-input {
|
|
@apply w-full h-[48px] px-4 bg-white border border-[#d9dfe7] rounded-lg outline-none text-text-dark text-sm placeholder-text-muted focus:border-primary focus:ring-2 focus:ring-primary/20 hover:border-gray-400 transition-all duration-200 shadow-sm;
|
|
}
|
|
|
|
select.form-input {
|
|
@apply appearance-none pr-10 cursor-pointer bg-no-repeat;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
|
background-position: right 1rem center;
|
|
background-size: 1.25em 1.25em;
|
|
}
|
|
|
|
.form-input[type="checkbox"] {
|
|
@apply w-5 h-5 min-h-0 text-primary border-[#d9dfe7] rounded focus:ring-primary focus:ring-2 focus:ring-offset-1 cursor-pointer transition-colors hover:border-gray-400;
|
|
}
|
|
|
|
.form-input-with-icon {
|
|
@apply pl-11;
|
|
}
|
|
|
|
.form-input-icon {
|
|
@apply absolute left-4 text-text-light pointer-events-none w-5 h-5 flex items-center justify-center;
|
|
}
|
|
|
|
.form-input-group {
|
|
@apply relative flex items-center w-full;
|
|
}
|
|
|
|
.form-actions {
|
|
@apply mt-2 flex flex-col sm:flex-row justify-end gap-4 mb-4;
|
|
}
|
|
|
|
.form-footer {
|
|
@apply px-6 py-6 sm:px-8 sm:py-6 border-t border-[#d9dfe7] bg-gray-50/30 flex flex-col sm:flex-row justify-end gap-3;
|
|
}
|
|
|
|
.helper-text {
|
|
@apply text-[14px] text-text-muted mt-2 leading-snug block;
|
|
}
|
|
|
|
.error-text {
|
|
@apply text-red-500 text-[14px] font-semibold mt-2 block;
|
|
}
|
|
|
|
/* Action Buttons */
|
|
.btn-primary {
|
|
@apply bg-primary hover:bg-primary-hover text-white text-sm font-[600] h-[45px] max-h-[45px] px-8 border border-transparent rounded-lg shadow-sm transition-all duration-200 text-center cursor-pointer inline-flex items-center justify-center focus:ring-2 focus:ring-offset-1 focus:ring-primary/50 box-border;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-white hover:bg-gray-50 text-text-medium text-sm border border-[#d9dfe7] font-[600] h-[45px] max-h-[45px] px-8 rounded-lg shadow-sm transition-all duration-200 text-center cursor-pointer inline-flex items-center justify-center focus:ring-2 focus:ring-offset-1 focus:ring-gray-200 box-border;
|
|
}
|
|
|
|
.nav-badge {
|
|
@apply bg-secondary text-white text-[10px] font-bold px-1.5 py-0.5 rounded-md uppercase ml-2 animate-pulse;
|
|
}
|
|
|
|
.notification-badge {
|
|
@apply absolute -top-1 -right-1 bg-secondary text-white text-[10px] font-bold w-4.5 h-4.5 rounded-full flex items-center justify-center;
|
|
}
|
|
|
|
.table-header-cell {
|
|
@apply px-6 py-4 text-left text-xs font-bold text-text-light uppercase tracking-wider;
|
|
}
|
|
|
|
.table-body-cell {
|
|
@apply px-6 py-3 whitespace-nowrap;
|
|
}
|
|
|
|
.table-action-link {
|
|
@apply hover:text-primary-hover font-semibold underline underline-offset-2;
|
|
}
|
|
|
|
@import "./login.css";
|
|
|
|
@media (min-width: 1024px) {
|
|
body.sidebar-collapsed .sidebar {
|
|
width: 80px !important;
|
|
min-width: 80px !important;
|
|
}
|
|
|
|
body.sidebar-collapsed .sidebar span {
|
|
display: none !important;
|
|
}
|
|
|
|
body.sidebar-collapsed .sidebar nav {
|
|
padding-left: 0.5rem !important;
|
|
padding-right: 0.5rem !important;
|
|
}
|
|
body.sidebar-collapsed .sidebar a {
|
|
justify-content: center !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
gap: 0 !important;
|
|
}
|
|
|
|
body.sidebar-collapsed #sidebar-profile div.flex-col,
|
|
body.sidebar-collapsed #sidebar-profile svg {
|
|
display: none !important;
|
|
}
|
|
|
|
body.sidebar-collapsed #sidebar-profile {
|
|
justify-content: center !important;
|
|
padding-left: 0.75rem !important;
|
|
padding-right: 0.75rem !important;
|
|
}
|
|
|
|
body.sidebar-collapsed .sidebar div.xl\:flex {
|
|
display: none !important;
|
|
}
|
|
|
|
body.sidebar-collapsed .sidebar img[alt="GMO-Z.com RUNSYSTEM"] {
|
|
display: none !important;
|
|
}
|
|
|
|
body.sidebar-collapsed .sidebar div.shrink-0 {
|
|
padding-left: 0.5rem !important;
|
|
padding-right: 0.5rem !important;
|
|
justify-content: center !important;
|
|
}
|
|
}
|
|
|