User and session selection rotaries

css/styles.css

@@ -92,6 +92,18 @@ body {
     transform: translate(-200px, 200px);
 }
 
+.bottom-middle {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: transform 400ms cubic-bezier(.47,1.64,.41,.8);
+}
+
+.bottom-middle.hidden {
+    transform: translate(-50%, 300px);
+}
+
+
 .bottom-right {
     position: absolute;
     bottom: 0;
@@ -123,6 +135,10 @@ body {
     top: var(--bleed-extra);
 }
 
+.bottom-bleed-extra {
+    bottom: var(--bleed-extra);
+}
+
 .center-text {
     text-align: center;
 }
@@ -211,3 +227,107 @@ body {
 #battery-icon {
     background: url("../assets/svg/battery-mid.svg");
 }
+
+.input-container {
+    display: flex;
+    background: white;
+    border-radius: 1rem;
+    background-color: transparent;
+
+    backdrop-filter: blur( 2px );
+    -webkit-backdrop-filter: blur( 2px );
+    box-shadow:
+	var(--tl-shadow-primary-concave),
+	var(--br-shadow-primary-concave);
+    padding: 0.3rem;
+    gap: 0.3rem;
+}
+
+.input-container input {
+    border-radius: 0.8rem;
+    background-color: transparent;
+
+    backdrop-filter: blur( 2px );
+    -webkit-backdrop-filter: blur( 2px );
+    box-shadow:
+	var(--tl-shadow-primary-convex),
+	var(--br-shadow-primary-convex),
+	0px 0px 100px color-mix(in srgb, var(--primary) 0%, transparent),
+	0px 0px 100px color-mix(in srgb, var(--secondary) 0%, transparent);
+    width: 100%;
+    flex-basis: 100%;
+    padding: 1rem;
+    border: none;
+    border: 1px solid transparent;
+    color: white;
+    transition: all 0.2s ease-in-out;
+}
+
+.input-container input:focus {
+    border: 1px solid var(--primary-dim);
+    outline: none;
+    box-shadow:
+	inset 0px 0px 10px color-mix(in srgb, var(--primary) 20%, transparent),
+	inset 0px 0px 10px color-mix(in srgb, var(--secondary) 20%, transparent),
+	0px 0px 100px color-mix(in srgb, var(--secondary) 20%, transparent),
+	0px 0px 100px color-mix(in srgb, var(--primary) 20%, transparent);
+}
+
+@media (max-width: 500px) {
+    .input-container {
+	flex-direction: column;
+    }
+
+    .input-container input {
+	border-radius: 0.8rem;
+    }
+}
+
+.dial-container {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 10px;
+    border-radius: 1rem;
+
+    background-color: transparent;
+
+    backdrop-filter: blur( 2px );
+    -webkit-backdrop-filter: blur( 2px );
+
+    border-radius: 14px;
+    box-shadow: var(--tl-shadow-primary-concave),
+		var(--br-shadow-primary-concave);
+    
+    margin-bottom: 20px;
+}
+
+.arrow {
+    cursor: pointer;
+    padding: 10px;
+    user-select: none;
+    pointer-events: all;
+}
+
+.items-container {
+    width: 200px;
+    overflow: hidden;
+}
+
+.items-wrapper {
+    display: flex;
+    transition: transform 0.3s ease-in-out;
+}
+
+.item {
+    min-width: 200px;
+    text-align: center;
+    padding: 10px;
+    flex-shrink: 0;
+
+    font-weight: bold;
+    font-size: 16px;
+
+    text-shadow: var(--tl-shadow-secondary-concave),
+		 var(--br-shadow-secondary-concave);
+}