.launch-btn { appearance: none; width: 100%; padding: 1vh 1vw; margin-top: 1vw; color: var(--text); background: transparent; border: 2px solid var(--links); border-radius: 5px; transition: 0.1s ease-in-out; } .launch-btn:hover { cursor: pointer; background-color: var(--links-transparent); } .username-label { margin-top: 1vh; } .fm-select { margin-bottom: 1vh; } .username-box { appearance: none; background: transparent; color: var(--text); padding: 0.675em 1em; border: 1px solid var(--links); border-radius: 0.25rem; cursor: text; width: 100%; max-width: 100%; } .username-box:focus { outline: none; background-color: var(--links-ultratransparent); } .fm-select-button { appearance: none; background: transparent; color: var(--text); width: 100%; padding: 0.675em 1em; border: 1px solid var(--links); border-radius: 0.25rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .fm-selected-value { text-align: left; } .fm-arrow { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--links); transition: transform ease-in-out 0.3s; } .fm-select-dropdown { position: absolute; list-style: none; width: 100%; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); background-color: var(--bg-secondary-1); border: 1px solid var(--links); border-radius: 4px; padding: 10px; margin-top: 10px; max-height: 200px; overflow-y: auto; transition: 0.2s ease; /*transform: scaleY(0);*/ opacity: 0; visibility: hidden; } .fm-select-dropdown:focus-within { box-shadow: 0 10px 25px var(--links-ultratransparent); } .fm-select-dropdown li { position: relative; cursor: pointer; display: flex; gap: 1rem; align-items: center; } .fm-select-dropdown li label { width: 100%; padding: 8px 10px; cursor: pointer; } .fm-select-dropdown::-webkit-scrollbar { width: 7px; } .fm-select-dropdown::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 25px; } .fm-select-dropdown::-webkit-scrollbar-thumb { background: #ccc; border-radius: 25px; } .fm-select-dropdown li + li { margin-top: 5px; } .fm-select-dropdown li, .fm-select-dropdown input ~ label { border-radius: 5px; } .fm-select-dropdown li:hover, .fm-select-dropdown input:checked ~ label { background-color: var(--surface-0); } .fm-select-dropdown input:focus ~ label { background-color: var(--surface-1); } .fm-select-dropdown input[type="radio"] { position: absolute; left: 0; opacity: 0; } .fm-select.active .fm-arrow { transform: rotate(180deg); } .fm-select.active .fm-select-dropdown { opacity: 1; visibility: visible; /*transform: scaleY(1);*/ }