| .comfy-user-selection { |
| width: 100vw; |
| height: 100vh; |
| position: absolute; |
| top: 0; |
| left: 0; |
| z-index: 999; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-family: sans-serif; |
| background: linear-gradient(var(--tr-even-bg-color), var(--tr-odd-bg-color)); |
| } |
|
|
| .comfy-user-selection-inner { |
| background: var(--comfy-menu-bg); |
| margin-top: -30vh; |
| padding: 20px 40px; |
| border-radius: 10px; |
| min-width: 365px; |
| position: relative; |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .comfy-user-selection-inner form { |
| width: 100%; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
|
|
| .comfy-user-selection-inner h1 { |
| margin: 10px 0 30px 0; |
| font-weight: normal; |
| } |
|
|
| .comfy-user-selection-inner label { |
| display: flex; |
| flex-direction: column; |
| width: 100%; |
| } |
|
|
| .comfy-user-selection input, |
| .comfy-user-selection select { |
| background-color: var(--comfy-input-bg); |
| color: var(--input-text); |
| border: 0; |
| border-radius: 5px; |
| padding: 5px; |
| margin-top: 10px; |
| } |
|
|
| .comfy-user-selection input::placeholder { |
| color: var(--descrip-text); |
| opacity: 1; |
| } |
|
|
| .comfy-user-existing { |
| width: 100%; |
| } |
|
|
| .no-users .comfy-user-existing { |
| display: none; |
| } |
|
|
| .comfy-user-selection-inner .or-separator { |
| margin: 10px 0; |
| padding: 10px; |
| display: block; |
| text-align: center; |
| width: 100%; |
| color: var(--descrip-text); |
| } |
|
|
| .comfy-user-selection-inner .or-separator { |
| overflow: hidden; |
| text-align: center; |
| margin-left: -10px; |
| } |
|
|
| .comfy-user-selection-inner .or-separator::before, |
| .comfy-user-selection-inner .or-separator::after { |
| content: ""; |
| background-color: var(--border-color); |
| position: relative; |
| height: 1px; |
| vertical-align: middle; |
| display: inline-block; |
| width: calc(50% - 20px); |
| top: -1px; |
| } |
|
|
| .comfy-user-selection-inner .or-separator::before { |
| right: 10px; |
| margin-left: -50%; |
| } |
|
|
| .comfy-user-selection-inner .or-separator::after { |
| left: 10px; |
| margin-right: -50%; |
| } |
|
|
| .comfy-user-selection-inner section { |
| width: 100%; |
| padding: 10px; |
| margin: -10px; |
| transition: background-color 0.2s; |
| } |
|
|
| .comfy-user-selection-inner section.selected { |
| background: var(--border-color); |
| border-radius: 5px; |
| } |
|
|
| .comfy-user-selection-inner footer { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| margin-top: 20px; |
| } |
|
|
| .comfy-user-selection-inner .comfy-user-error { |
| color: var(--error-text); |
| margin-bottom: 10px; |
| } |
|
|
| .comfy-user-button-next { |
| font-size: 16px; |
| padding: 6px 10px; |
| width: 100px; |
| display: flex; |
| gap: 5px; |
| align-items: center; |
| justify-content: center; |
| } |