frontend/src/assets/css/CreatePodMethodSelector.css
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background-color: #252526;
border-radius: 4px;
width: 380px; /* Reduced from 500px to match screenshot */
max-width: 90%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
border: 1px solid #3c3c3c;
color: #cccccc;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
border-bottom: 1px solid #3c3c3c;
background-color: #2a2a2a;
}
.modal-header h3 {
margin: 0;
font-size: 14px;
font-weight: 500;
color: #cccccc;
}
.close-button {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
color: #858585;
padding: 0;
margin: 0;
line-height: 1;
}
.close-button:hover {
color: #cccccc;
}
.modal-body {
padding: 8px 12px;
}
.modal-footer {
padding: 8px 12px;
border-top: 1px solid #3c3c3c;
display: flex;
justify-content: flex-end;
gap: 8px;
background-color: #2a2a2a;
}
.method-option {
padding: 6px 8px;
cursor: pointer;
border-radius: 2px;
}
.method-option:hover {
background-color: #2d2d2d;
}
.radio-container {
display: flex;
align-items: flex-start;
}
.radio-button {
margin-right: 8px;
margin-top: 2px; /* Align with first line of text */
}
.radio-outer {
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid #858585;
display: flex;
align-items: center;
justify-content: center;
}
.radio-inner {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #0e639c;
}
.method-text {
display: flex;
flex-direction: column;
}
.method-label {
font-size: 13px;
color: #cccccc;
margin-bottom: 2px;
}
.method-description {
font-size: 12px;
color: #858585;
line-height: 1.3;
}
.cancel-button {
padding: 4px 10px;
background-color: #333333;
border: 1px solid #3c3c3c;
border-radius: 2px;
cursor: pointer;
font-size: 12px;
color: #cccccc;
min-width: 70px;
}
.cancel-button:hover {
background-color: #3c3c3c;
}
.continue-button {
padding: 4px 10px;
background-color: #0e639c;
color: white;
border: none;
border-radius: 2px;
cursor: pointer;
font-size: 12px;
min-width: 70px;
}
.continue-button:hover {
background-color: #1177bb;
}
.continue-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}