293 lines
7.7 KiB
CSS
293 lines
7.7 KiB
CSS
/* ComfyUI Prompt Translator Styles */
|
|
|
|
/* Node base styling - 400px fixed width, 600px height */
|
|
.comfy-node.PromptTranslator {
|
|
width: 400px !important;
|
|
height: 600px !important;
|
|
min-height: 600px !important;
|
|
max-height: 600px !important;
|
|
background: #2a2a2a !important;
|
|
border-radius: 8px !important;
|
|
border: 1px solid #444 !important;
|
|
overflow: hidden !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
/* Node title styling - 1st row: 30px height */
|
|
.comfy-node.PromptTranslator .comfy-node-title {
|
|
height: 30px !important;
|
|
line-height: 30px !important;
|
|
text-align: center !important;
|
|
font-size: 14px !important;
|
|
font-weight: bold !important;
|
|
color: #ffffff !important;
|
|
background: #333 !important;
|
|
border-radius: 8px 8px 0 0 !important;
|
|
position: absolute !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
}
|
|
|
|
/* Provider and API key row - 2nd row: 40px height */
|
|
.comfy-node.PromptTranslator .provider-row {
|
|
height: 40px !important;
|
|
display: flex !important;
|
|
padding: 5px 10px !important;
|
|
gap: 10px !important;
|
|
align-items: center !important;
|
|
position: absolute !important;
|
|
top: 30px !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .provider-select {
|
|
width: 180px !important;
|
|
height: 25px !important;
|
|
background: #1a1a1a !important;
|
|
color: #ffffff !important;
|
|
border: 1px solid #555 !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .api-key-input {
|
|
width: 180px !important;
|
|
height: 25px !important;
|
|
background: #1a1a1a !important;
|
|
color: #ffffff !important;
|
|
border: 1px solid #555 !important;
|
|
border-radius: 4px !important;
|
|
padding: 0 5px !important;
|
|
}
|
|
|
|
/* Input text area - 3rd row: 150px height */
|
|
.comfy-node.PromptTranslator .input-section {
|
|
height: 150px !important;
|
|
padding: 10px !important;
|
|
position: absolute !important;
|
|
top: 70px !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .input-label {
|
|
font-size: 12px !important;
|
|
color: #cccccc !important;
|
|
margin-bottom: 5px !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .input-textarea {
|
|
width: 380px !important;
|
|
height: 130px !important;
|
|
background: #1a1a1a !important;
|
|
color: #ffffff !important;
|
|
border: 1px solid #555 !important;
|
|
border-radius: 4px !important;
|
|
padding: 8px !important;
|
|
font-family: 'Courier New', monospace !important;
|
|
font-size: 13px !important;
|
|
resize: none !important;
|
|
}
|
|
|
|
/* Translation buttons - Custom drawn buttons */
|
|
.comfy-node.PromptTranslator .button-section {
|
|
height: 50px !important;
|
|
padding: 10px !important;
|
|
display: flex !important;
|
|
gap: 10px !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .translate-button {
|
|
position: absolute !important;
|
|
height: 35px !important;
|
|
width: 190px !important;
|
|
background: #4a90e2 !important;
|
|
color: white !important;
|
|
border: none !important;
|
|
border-radius: 4px !important;
|
|
cursor: pointer !important;
|
|
font-size: 14px !important;
|
|
font-weight: bold !important;
|
|
transition: background-color 0.2s !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .translate-button.ja-to-en {
|
|
left: 10px !important;
|
|
top: 5px !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .translate-button.en-to-ja {
|
|
right: 10px !important;
|
|
top: 5px !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .translate-button:hover {
|
|
background: #5aa0f2 !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .translate-button:disabled {
|
|
background: #666 !important;
|
|
cursor: not-allowed !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .translate-button:active {
|
|
background: #3a7bc8 !important;
|
|
transform: translateY(1px) !important;
|
|
}
|
|
|
|
/* Translation buttons section - 4th row: 50px height */
|
|
.comfy-node.PromptTranslator .button-section {
|
|
height: 50px !important;
|
|
padding: 10px !important;
|
|
position: absolute !important;
|
|
top: 220px !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
}
|
|
|
|
/* Output text area - 5th row: 150px height */
|
|
.comfy-node.PromptTranslator .output-section {
|
|
height: 150px !important;
|
|
padding: 10px !important;
|
|
position: absolute !important;
|
|
top: 270px !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .output-label {
|
|
font-size: 12px !important;
|
|
color: #cccccc !important;
|
|
margin-bottom: 5px !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .output-textarea {
|
|
width: 380px !important;
|
|
height: 130px !important;
|
|
background: #333333 !important;
|
|
color: #ffffff !important;
|
|
border: 1px solid #555 !important;
|
|
border-radius: 4px !important;
|
|
padding: 8px !important;
|
|
font-family: 'Courier New', monospace !important;
|
|
font-size: 13px !important;
|
|
resize: none !important;
|
|
readonly: true !important;
|
|
}
|
|
|
|
/* Token counter - 6th row: 40px height */
|
|
.comfy-node.PromptTranslator .token-section {
|
|
height: 40px !important;
|
|
padding: 5px 10px !important;
|
|
background: #1a1a1a !important;
|
|
border-radius: 0 0 8px 8px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: space-between !important;
|
|
position: absolute !important;
|
|
bottom: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .token-count {
|
|
font-family: 'Courier New', monospace !important;
|
|
font-size: 12px !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .token-status {
|
|
font-family: 'Courier New', monospace !important;
|
|
font-size: 12px !important;
|
|
color: #cccccc !important;
|
|
}
|
|
|
|
/* Socket styling */
|
|
.comfy-node.PromptTranslator .comfy-socket {
|
|
background: #4a90e2 !important;
|
|
border: 2px solid #333 !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .comfy-socket.input {
|
|
position: absolute !important;
|
|
left: -8px !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .comfy-socket.output {
|
|
position: absolute !important;
|
|
right: -8px !important;
|
|
}
|
|
|
|
/* Progress indicator */
|
|
.comfy-node.PromptTranslator .progress-indicator {
|
|
position: absolute !important;
|
|
top: 10px !important;
|
|
right: 10px !important;
|
|
width: 12px !important;
|
|
height: 12px !important;
|
|
border-radius: 50% !important;
|
|
background: #666 !important;
|
|
transition: background-color 0.3s !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .progress-indicator.translating {
|
|
background: #4a90e2 !important;
|
|
animation: pulse 1s infinite !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .progress-indicator.complete {
|
|
background: #5cb85c !important;
|
|
}
|
|
|
|
.comfy-node.PromptTranslator .progress-indicator.error {
|
|
background: #d9534f !important;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.2);
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Error states */
|
|
.comfy-node.PromptTranslator .error-message {
|
|
color: #d9534f !important;
|
|
font-size: 12px !important;
|
|
background: rgba(217, 83, 79, 0.1) !important;
|
|
padding: 5px !important;
|
|
border-radius: 4px !important;
|
|
margin: 5px 0 !important;
|
|
}
|
|
|
|
/* Success states */
|
|
.comfy-node.PromptTranslator .success-message {
|
|
color: #5cb85c !important;
|
|
font-size: 12px !important;
|
|
background: rgba(92, 184, 92, 0.1) !important;
|
|
padding: 5px !important;
|
|
border-radius: 4px !important;
|
|
margin: 5px 0 !important;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 450px) {
|
|
.comfy-node.PromptTranslator {
|
|
width: 100% !important;
|
|
max-width: 400px !important;
|
|
}
|
|
} |