Spaces:
Configuration error
Configuration error
| /* General body styling */ | |
| body { | |
| font-family: Arial, sans-serif; | |
| text-align: center; | |
| background-color: #f9f9f9; | |
| margin: 0; | |
| padding: 0; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| /* Toolbar styling */ | |
| .toolbar { | |
| margin: 10px auto; | |
| padding: 10px; | |
| } | |
| /* Image editor container */ | |
| #tui-image-editor-container { | |
| width: 90%; | |
| height: 75vh; /* Reduced height to accommodate toolbar */ | |
| max-width: 1200px; | |
| margin: 20px auto; | |
| border: 1px solid #ddd; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| background-color: #fff; | |
| border-radius: 8px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Image editor specific styling */ | |
| #tui-image-editor { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| /* Button styling */ | |
| .custom-button { | |
| margin: 10px 5px; | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| font-weight: bold; | |
| background-color: #007bff; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| .custom-button:hover { | |
| background-color: #0056b3; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| #tui-image-editor-container { | |
| width: 95%; | |
| height: 65vh; /* Reduced height on mobile for better visibility */ | |
| } | |
| .custom-button { | |
| width: 100%; | |
| margin: 10px 0; | |
| } | |
| } | |