| .lds-ring { | |
| display: inline-block; | |
| position: relative; | |
| width: 1em; | |
| height: 1em; | |
| } | |
| .lds-ring div { | |
| box-sizing: border-box; | |
| display: block; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| border: 0.15em solid #fff; | |
| border-radius: 50%; | |
| animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; | |
| border-color: #fff transparent transparent transparent; | |
| } | |
| .lds-ring div:nth-child(1) { | |
| animation-delay: -0.45s; | |
| } | |
| .lds-ring div:nth-child(2) { | |
| animation-delay: -0.3s; | |
| } | |
| .lds-ring div:nth-child(3) { | |
| animation-delay: -0.15s; | |
| } | |
| @keyframes lds-ring { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .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::-moz-placeholder { | |
| color: var(--descrip-text); | |
| opacity: 1; | |
| } | |
| .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; | |
| width: 100%; | |
| color: var(--descrip-text); | |
| 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; | |
| } |