PrometheusGroup/filemaster-control-panel

1 2:root {3    --primary: #6366F1;4    --primary-dark: #4F46E5;5    --background: #1A1A2E;6    --card-bg: #16213E;7    --text: #E6E6E6;8    --text-muted: #A0AEC0;9    --error: #F56565;10    --success: #48BB78;11}12body.dark-theme {13    background-color: var(--background);14    color: var(--text);15    min-height: 100vh;16    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;17    margin: 0;18    padding: 0;19}20.container {21    max-width: 1200px;22    margin: 0 auto;23    padding: 2rem;24    min-height: 100vh;25    display: flex;26    flex-direction: column;27}28header {29    margin-bottom: 2rem;30    text-align: center;31}32 33header h1 {34    color: var(--primary);35    font-size: 2.5rem;36    margin-bottom: 0.5rem;37}38 39header p {40    color: var(--text-muted);41    font-size: 1.1rem;42}43 44.card {45    background-color: var(--card-bg);46    border-radius: 0.5rem;47    padding: 1.5rem;48    margin-bottom: 1.5rem;49    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);50}51 52.form-card {53    border-left: 4px solid var(--primary);54}55 56.result-card {57    border-left: 4px solid var(--success);58}59 60.result-card.error {61    border-left-color: var(--error);62}63 64h2 {65    color: var(--primary);66    margin-top: 0;67    margin-bottom: 1rem;68    font-size: 1.5rem;69}70 71.form-group {72    margin-bottom: 1rem;73}74 75label {76    display: block;77    margin-bottom: 0.5rem;78    color: var(--text-muted);79}80 81select, input, textarea {82    width: 100%;83    padding: 0.75rem;84    border-radius: 0.25rem;85    border: 1px solid #2D3748;86    background-color: #2D3748;87    color: var(--text);88    margin-bottom: 0.5rem;89}90 91textarea {92    min-height: 150px;93    resize: vertical;94}95 96button {97    background-color: var(--primary);98    color: white;99    padding: 0.75rem 1.5rem;100    border: none;101    border-radius: 0.25rem;102    cursor: pointer;103    font-weight: bold;104    transition: background-color 0.2s;105    margin-top: 1rem;106}107 108button:hover {109    background-color: var(--primary-dark);110}111 112button:disabled {113    background-color: #4A5568;114    cursor: not-allowed;115}116 117.loader {118    display: flex;119    justify-content: center;120    gap: 0.5rem;121    margin: 1rem 0;122}123 124.loader span {125    display: inline-block;126    width: 1rem;127    height: 1rem;128    border-radius: 50%;129    background-color: var(--primary);130    animation: bounce 1.4s infinite ease-in-out both;131}132 133.loader span:nth-child(1) {134    animation-delay: -0.32s;135}136 137.loader span:nth-child(2) {138    animation-delay: -0.16s;139}140 141@keyframes bounce {142    0%, 80%, 100% {143        transform: scale(0);144    }145    40% {146        transform: scale(1);147    }148}149 150pre {151    background-color: #2D3748;152    padding: 1rem;153    border-radius: 0.25rem;154    overflow-x: auto;155    white-space: pre-wrap;156    word-wrap: break-word;157}158 159@media (max-width: 768px) {160    .container {161        padding: 1rem;162    }163    164    header h1 {165        font-size: 2rem;166    }167}168 169 170