mirror of
https://github.com/UNITRONIX/BetterDesk.git
synced 2026-09-10 01:27:11 +00:00
UNITRONIX
bc624a4a32
Resolved Docker bash and PowerShell function naming issues, updated Dockerfile and entrypoint script, and refactored install-improved.ps1 for compatibility. Added and translated extensive documentation for client generator, GPU optimization, troubleshooting, and quick fixes. Introduced new service and static files for performance profiles, and updated README with recent fixes and documentation links.
448 lines
8.1 KiB
CSS
448 lines
8.1 KiB
CSS
/* Client Generator Styles */
|
|
|
|
.generator-container {
|
|
max-width: 1600px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.generator-section {
|
|
margin-bottom: 1.5rem;
|
|
padding: 1.5rem;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.section-title i {
|
|
color: var(--primary-color);
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
/* Platform Selection */
|
|
.platform-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.platform-card {
|
|
background: rgba(40, 40, 40, 0.6);
|
|
border: 2px solid var(--glass-border);
|
|
border-radius: 8px;
|
|
padding: 1.5rem 1rem;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.platform-card:hover {
|
|
background: rgba(55, 55, 55, 0.7);
|
|
border-color: var(--primary-color);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.platform-card.selected {
|
|
background: rgba(107, 114, 128, 0.3);
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 20px rgba(107, 114, 128, 0.4);
|
|
}
|
|
|
|
.platform-icon {
|
|
font-size: 3rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0.75rem;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.platform-card.selected .platform-icon {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.platform-badge {
|
|
position: absolute;
|
|
top: -5px;
|
|
right: -10px;
|
|
background: var(--primary-color);
|
|
color: white;
|
|
font-size: 0.7rem;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.platform-name {
|
|
display: block;
|
|
font-size: 0.9rem;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Two Column Layout */
|
|
.two-column-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.two-column-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Form Elements */
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
background: rgba(40, 40, 40, 0.6);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
font-size: 0.95rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
background: rgba(50, 50, 50, 0.7);
|
|
box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: var(--text-secondary);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
textarea.form-control {
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
select.form-control {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-text {
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Checkboxes */
|
|
.checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
border-radius: 6px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.checkbox-label:hover {
|
|
background: rgba(55, 65, 81, 0.3);
|
|
}
|
|
|
|
.checkbox-label input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
accent-color: var(--primary-color);
|
|
}
|
|
|
|
.checkbox-label span {
|
|
color: var(--text-primary);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* Radio Buttons */
|
|
.radio-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.radio-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
border-radius: 6px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.radio-label:hover {
|
|
background: rgba(55, 65, 81, 0.3);
|
|
}
|
|
|
|
.radio-label input[type="radio"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
accent-color: var(--primary-color);
|
|
}
|
|
|
|
.radio-label span {
|
|
color: var(--text-primary);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* Permissions Grid */
|
|
.permissions-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* File Input */
|
|
.file-input-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.file-input {
|
|
display: none;
|
|
}
|
|
|
|
.file-btn {
|
|
padding: 0.6rem 1.2rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.file-name {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Generate Button */
|
|
.generate-button-container {
|
|
text-align: center;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.btn-large {
|
|
padding: 1rem 3rem;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-large:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(107, 114, 128, 0.4);
|
|
}
|
|
|
|
.btn-large i {
|
|
margin-right: 0.75rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
/* Generation Status */
|
|
.generation-status {
|
|
margin-top: 2rem;
|
|
padding: 1.5rem;
|
|
background: rgba(40, 40, 40, 0.6);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 30px;
|
|
background: rgba(30, 30, 30, 0.8);
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
margin-bottom: 1rem;
|
|
border: 1px solid var(--glass-border);
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--primary-color), var(--info-color));
|
|
border-radius: 15px;
|
|
width: 0%;
|
|
transition: width 0.5s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.status-message {
|
|
text-align: center;
|
|
color: var(--text-primary);
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-message.success {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
.status-message.error {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.status-message i {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
/* Download Link */
|
|
.download-link {
|
|
display: inline-block;
|
|
margin-top: 1rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: var(--success-color);
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.download-link:hover {
|
|
background: #0ea472;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
|
|
}
|
|
|
|
.download-link i {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.platform-grid {
|
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
}
|
|
|
|
.platform-icon {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.permissions-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.file-input-wrapper {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.btn-large {
|
|
width: 100%;
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Animation for generation */
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.generating {
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Auto-fill buttons */
|
|
.auto-fill-buttons {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.auto-fill-buttons .btn {
|
|
flex: 1;
|
|
min-width: 150px;
|
|
}
|
|
|
|
/* Input group with addon button */
|
|
.input-group {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.input-group .form-control {
|
|
flex: 1;
|
|
}
|
|
|
|
.btn-input-addon {
|
|
padding: 0.75rem 1rem;
|
|
background: var(--primary-color);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 6px;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
min-width: 45px;
|
|
height: 47px;
|
|
}
|
|
|
|
.btn-input-addon-tall {
|
|
padding: 0.75rem 1rem;
|
|
background: var(--primary-color);
|
|
border: 1px solid var(--glass-border);
|
|
border-radius: 6px;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
min-width: 45px;
|
|
height: 92px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-input-addon:hover,
|
|
.btn-input-addon-tall:hover {
|
|
background: var(--secondary-color);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-input-addon i,
|
|
.btn-input-addon-tall i {
|
|
font-size: 1rem;
|
|
}
|