css

web/index.html

@@ -34,9 +34,9 @@
         <span class="avatar" id="sidebar-user-avatar"></span>
         <span class="sidebar-username" id="sidebar-username">我的昵称</span>
       </div>
-      <div class="search">
+      <div class="join-room">
         <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" style="width:22px;height:22px;vertical-align:middle;margin-right:25px;margin-left: 25px;"><path d="M21 3.01H3c-1.1 0-2 .9-2 2V9h2V4.99h18v14.03H3V15H1v4.01c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98v-14c0-1.11-.9-2-2-2zM11 16l4-4-4-4v3H1v2h10v3z"></path></svg>
-        加入新的房间
+        进入新房间
       </div>
       <div class="rooms" id="room-list">
         <!-- JS填充房间项 -->

web/style.css

@@ -50,7 +50,7 @@ body {
     box-shadow: 2px 0 8px #e0e0e0a0;
 }
 
-.sidebar .search {
+.sidebar .join-room {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -65,12 +65,12 @@ body {
   user-select: none;
 }
 
-.sidebar .search input,
-.sidebar .search .menu-icon {
+.sidebar .join-room input,
+.sidebar .join-room .menu-icon {
     display: none !important;
 }
 
-.sidebar .search:hover {
+.sidebar .join-room:hover {
     box-shadow: 0 2px 12px 0 #30a8f733, 0 1.5px 6px 0 #30a8f71a;
     background: #f3faff;
     transition: box-shadow 0.18s, background 0.18s;
@@ -853,4 +853,46 @@ body {
 .login-btn:hover,
 .login-btn:focus {
   background: #2196e3;
+}
+
+.login-modal {
+  position: fixed;
+  z-index: 9999;
+  left: 0; top: 0; right: 0; bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.login-modal-bg {
+  position: absolute;
+  left: 0; top: 0; right: 0; bottom: 0;
+  background: rgba(255,255,255,0.5);
+  backdrop-filter: blur(12px);
+  z-index: 1;
+}
+.login-modal-card {
+  position: relative;
+  z-index: 2;
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 2px 16px rgba(60,80,100,0.13);
+  padding: 32px 24px 24px 24px;
+  min-width: 340px;
+  max-width: 90vw;
+  text-align: center;
+}
+.login-modal-close {
+  position: absolute;
+  right: 12px;
+  top: 10px;
+  background: none;
+  border: none;
+  font-size: 1.7rem;
+  color: #888;
+  cursor: pointer;
+  z-index: 3;
+  line-height: 1;
+}
+.login-modal-close:hover {
+  color: #30a8f7;
 }