cms-laravel/resources/css/app.css

101 lines
2.0 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
/* Import Bootstrap */
@import 'bootstrap/dist/css/bootstrap.min.css';
/* General styles */
#root {
height: 100%;
overflow: hidden;
}
/* Custom colors and hover effects */
:root {
--primary-color: #e74610; /* Replace Ant Design's orange */
--hover-bg: rgba(231, 70, 16, 0.1);
}
/* Menu styles (adapt for Bootstrap navbar or custom sidebar) */
.nav-link:hover,
.nav-link.active {
color: var(--primary-color) !important;
}
.nav-item:hover {
background-color: var(--hover-bg) !important;
}
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
background-color: #f5f5f5;
}
::-webkit-scrollbar-track {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #b8bbc9;
}
/* Form and button styles */
.form-control:disabled {
cursor: text !important;
}
.btn-sm {
padding: 0 20px !important;
height: 27px !important;
}
/* Breadcrumb (Bootstrap equivalent) */
.breadcrumb-item a:hover {
color: var(--primary-color) !important;
}
.breadcrumb-item:last-child a {
color: #4d4d4d;
font-weight: 500;
opacity: 0.85;
}
/* Custom terms management (adapt for your UI) */
.terms-management {
position: absolute;
left: -42px;
}
.terms-management-parent {
position: relative;
left: -30px;
}
.terms-management-parent .terms-management {
position: relative;
left: 37px;
border-color: var(--primary-color) !important;
background: var(--primary-color);
width: 100px;
color: #fff;
text-align: right;
}
.terms-management-parent .btn:hover,
.terms-management-parent .btn:focus {
background: var(--primary-color);
color: #fff;
}
/* Responsive design */
@media only screen and (max-width: 480px) {
.app-container {
position: fixed;
width: 100%;
}
}