updateweb
This commit is contained in:
Local Server
@@ -586,3 +586,483 @@ body {
|
||||
height: 2px;
|
||||
background: linear-gradient(to right, #667eea, transparent);
|
||||
}
|
||||
|
||||
/* Product Image Variants Styling */
|
||||
.image-variant-item {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.image-variant-item:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#imageVariantsContainer .form-control-sm {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
#imageVariantsContainer .form-label.small {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
#productDescriptionEditor {
|
||||
background: white;
|
||||
}
|
||||
|
||||
#productDescriptionEditor .ql-editor {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
/* Image Picker Grid for Color Variants */
|
||||
.image-picker-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border: 2px dashed #dee2e6;
|
||||
border-radius: 8px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.image-picker-item {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
background: #f8f9fa;
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.image-picker-item:hover {
|
||||
border-color: #667eea;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.image-picker-item.selected {
|
||||
border-color: #28a745;
|
||||
background: #e8f5e9;
|
||||
}
|
||||
|
||||
.image-picker-item img {
|
||||
width: 100%;
|
||||
height: calc(100% - 25px);
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-picker-overlay {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
background: rgba(40, 167, 69, 0.95);
|
||||
color: white;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.image-picker-item.selected .image-picker-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.image-picker-label {
|
||||
display: block;
|
||||
padding: 4px 6px;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #dee2e6;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #495057;
|
||||
height: 25px;
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.image-picker-item.selected .image-picker-label {
|
||||
background: #e8f5e9;
|
||||
color: #28a745;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for image picker */
|
||||
@media (max-width: 768px) {
|
||||
.image-picker-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.image-picker-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.image-picker-label {
|
||||
font-size: 10px;
|
||||
padding: 3px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Toast Notifications */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 300px;
|
||||
max-width: 500px;
|
||||
padding: 16px 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
pointer-events: auto;
|
||||
transform: translateX(400px);
|
||||
opacity: 0;
|
||||
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toast-show {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast-hide {
|
||||
transform: translateX(400px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toast-close:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Toast Types */
|
||||
.toast-success {
|
||||
border-left: 5px solid #10b981;
|
||||
background: linear-gradient(to right, #ecfdf5 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.toast-success .toast-icon {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
border-left: 5px solid #ef4444;
|
||||
background: linear-gradient(to right, #fef2f2 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.toast-error .toast-icon {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
border-left: 5px solid #f59e0b;
|
||||
background: linear-gradient(to right, #fffbeb 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.toast-warning .toast-icon {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.toast-info {
|
||||
border-left: 5px solid #3b82f6;
|
||||
background: linear-gradient(to right, #eff6ff 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.toast-info .toast-icon {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Responsive Toast */
|
||||
@media (max-width: 768px) {
|
||||
.toast-container {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
min-width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark Mode Styles */
|
||||
body.dark-mode {
|
||||
background-color: #1a1a1a;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
body.dark-mode .main-content {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
body.dark-mode .top-bar {
|
||||
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
body.dark-mode .settings-section,
|
||||
body.dark-mode .modal-content {
|
||||
background: #2d3748;
|
||||
color: #f0f0f0;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .settings-section h4 {
|
||||
color: #ffffff;
|
||||
border-bottom-color: #4a5568;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body.dark-mode .form-control,
|
||||
body.dark-mode .form-select {
|
||||
background-color: #1f2937;
|
||||
color: #ffffff;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .form-control:focus,
|
||||
body.dark-mode .form-select:focus {
|
||||
background-color: #374151;
|
||||
border-color: #667eea;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
|
||||
body.dark-mode .form-control::placeholder {
|
||||
color: #9ca3af;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body.dark-mode label {
|
||||
color: #e5e7eb;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
body.dark-mode .btn-outline-secondary {
|
||||
background-color: #374151;
|
||||
color: #e0e0e0;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .btn-outline-secondary:hover {
|
||||
background-color: #4a5568;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
body.dark-mode .logo-preview,
|
||||
body.dark-mode .favicon-preview {
|
||||
background: #374151;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .theme-option {
|
||||
background: #374151;
|
||||
border-color: #4a5568;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
body.dark-mode .theme-option:hover {
|
||||
border-color: #667eea;
|
||||
background: #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .theme-option.active {
|
||||
border-color: #667eea;
|
||||
background: linear-gradient(135deg, #667eea22 0%, #764ba233 100%);
|
||||
}
|
||||
|
||||
body.dark-mode .text-muted {
|
||||
color: #9ca3af !important;
|
||||
}
|
||||
|
||||
body.dark-mode .modal-header {
|
||||
background: #2d3748;
|
||||
border-bottom-color: #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .modal-footer {
|
||||
background: #2d3748;
|
||||
border-top-color: #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .media-item {
|
||||
background: #374151;
|
||||
}
|
||||
|
||||
body.dark-mode .media-item:hover {
|
||||
background: #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .toast {
|
||||
background: #2d3748;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
body.dark-mode .toast-success {
|
||||
background: linear-gradient(to right, #064e3b 0%, #2d3748 100%);
|
||||
}
|
||||
|
||||
body.dark-mode .toast-error {
|
||||
background: linear-gradient(to right, #7f1d1d 0%, #2d3748 100%);
|
||||
}
|
||||
|
||||
body.dark-mode .toast-warning {
|
||||
background: linear-gradient(to right, #78350f 0%, #2d3748 100%);
|
||||
}
|
||||
|
||||
body.dark-mode .toast-info {
|
||||
background: linear-gradient(to right, #1e3a8a 0%, #2d3748 100%);
|
||||
}
|
||||
|
||||
body.dark-mode .toast-message {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
body.dark-mode .btn-close {
|
||||
filter: invert(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
body.dark-mode .btn-close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body.dark-mode .btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body.dark-mode .btn-primary:hover {
|
||||
background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
body.dark-mode .card {
|
||||
background: #2d3748;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .card-body {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
body.dark-mode .table {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
body.dark-mode .table thead th {
|
||||
background: #374151;
|
||||
color: #ffffff;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .table tbody td {
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .table tbody tr:hover {
|
||||
background: #374151;
|
||||
}
|
||||
|
||||
body.dark-mode select option {
|
||||
background: #1f2937;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body.dark-mode .input-group-text {
|
||||
background: #374151;
|
||||
color: #f0f0f0;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .dropdown-menu {
|
||||
background: #2d3748;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
body.dark-mode .dropdown-item {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
body.dark-mode .dropdown-item:hover {
|
||||
background: #374151;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body.dark-mode hr {
|
||||
border-color: #4a5568;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body.dark-mode .card-body {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user