.t60-password-generator-wrapper {
max-width: 450px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
border: 1px solid #e0e0e0;
padding: 20px;
border-radius: 8px;
background-color: #f9f9f9;
} .t60-password-field-wrapper {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid #ccc;
border-radius: 25px; padding: 5px;
background-color: #fff;
margin-bottom: 20px;
}
#t60-password-output {
flex-grow: 1;
border: none;
outline: none;
font-size: 16px;
padding: 8px 15px;
background: transparent;
font-family: 'Courier New', Courier, monospace;
}
.t60-strength-indicator {
font-size: 12px;
font-weight: bold;
color: #28a745; background-color: #eaf6ec;
padding: 5px 10px;
border-radius: 15px;
white-space: nowrap;
}
#t60-regenerate-btn {
border: none;
background: none;
cursor: pointer;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
color: #555;
}
#t60-regenerate-btn:hover {
color: #000;
}
#t60-regenerate-btn svg {
width: 20px;
height: 20px;
}
#t60-copy-btn {
background-color: #0073e6;
color: white;
border: none;
border-radius: 20px;
padding: 10px 20px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s;
}
#t60-copy-btn:hover {
background-color: #005bb5;
}
#t60-copy-btn.copied {
background-color: #28a745; } .t60-controls-wrapper {
display: flex;
flex-direction: column;
gap: 15px;
}
.t60-length-control {
display: flex;
flex-direction: column;
gap: 8px;
}
.t60-length-control label {
font-weight: 500;
color: #333;
}
.t60-slider-container {
display: flex;
align-items: center;
gap: 10px;
}
.t60-slider-btn {
border: 1px solid #ccc;
background-color: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
line-height: 1;
color: #555;
}
#t60-length-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
background: #d3d3d3;
outline: none;
border-radius: 5px;
}
#t60-length-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
background: #0073e6;
cursor: pointer;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
#t60-length-slider::-moz-range-thumb {
width: 24px;
height: 24px;
background: #0073e6;
cursor: pointer;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 0 2px rgba(0,0,0,0.3);
} .t60-charset-controls label {
font-weight: 500;
color: #333;
}
.t60-checkboxes {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin-top: 8px;
}
.t60-checkboxes label {
display: flex;
align-items: center;
gap: 5px;
font-weight: normal;
}