css实现自适应支持夜晚暗黑模式的视频会议群聊天ui效果代码-html代码-BFW代码库

css实现自适应支持夜晚暗黑模式的视频会议群聊天ui效果代码

代码语言：html

代码描述：css实现自适应支持夜晚暗黑模式的视频会议群聊天ui效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
      box-sizing: border-box;
    }
    
    html, body {
      width: 100%;
      height: 100vh;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    button {
      outline: none;
      transition: 0.2s;
      cursor: pointer;
    }
    button:hover {
      opacity: 0.7;
    }
    
    body {
      --app-background: #eaebf5;
      --chat-background: #fff;
      --link-color: #c0c1c5;
      --navigation-bg: #fff;
      --navigation-box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
      --main-color: #3d42df;
      --message-bg: #f3f4f9;
      --message-bg-2: #3d42df;
      --message-text: #2c303a;
      --placeholder-text: #a2a4bc;
      --button-bg: #fff;
    }
    
    body.dark {
      --app-background: #262a42;
      --navigation-box-shadow: 0px 0px 8px 0px #282b33;
      --chat-background: #3c3f56;
      --message-bg: #2c3046;
      --message-text: rgba(255,255,255,0.8);
      --placeholder-text: #fff;
      --navigation-bg: #3c3f56;
      --button-bg: #3c3f56;
      --main-color: #6f74ff;
      --message-bg-2: #6f74ff;
    }
    body.dark .mic {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-mic-off' viewBox='0 0 24 24'%3E%3Cpath d='M1 1l22 22M9 9v3a3 3 0 005.12 2.12M15 9.34V4a3 3 0 00-5.94-.6'/%3E%3Cpath d='M17 16.95A7 7 0 015 12v-2m14 0v2a7 7 0 01-.11 1.23M12 19v4M8 23h8'/%3E%3C/svg%3E%0A");
    }
    body.dark .camera {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-camera-off' viewBox='0 0 24 24'%3E%3Cpath d='M1 1l22 22M21 21H3a2 2 0 01-2-2V8a2 2 0 012-2h3m3-3h6l2 3h4a2 2 0 012 2v9.34m-7.72-2.06a4 4 0 11-5.56-5.56'/%3E%3C/svg%3E%0A");
    }
    body.dark .maximize {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-maximize' viewBox='0 0 24 24'%3E%3Cpath d='M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3'/%3E%3C/svg%3E%0A");
    }
    body.dark .magnifier {
      color: #fff;
    }
    body.dark .chat-header {
      border-color: var(--message-bg);
    }
    body.dark .btn-close-right {
      color: #fff;
    }
    
    a {
      text-decoration: none;
    }
    
    .app-container {
      background-color: var(--app-background);
      width: 100%;
      height: 100%;
      font-family: "DM Sans", sans-serif;
      display: flex;
      transition: 0.2s;
    }
    
    .left-side {
      position: relative;
      padding: 16px;
      flex-basis: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    
    .navigation {
      display: flex;
      flex-direction: column;
      background-color: var(--navigation-bg);
      padding: 24px;
      border-radius: 10px;
      box-shadow: var(--navigation-box-shadow);
    }
    
    .nav-link + .nav-link {
      margin-top: 32px;
    }
    
    .nav-link:hover svg {
      color: #3d42df;
    }
    
    .icon svg {
      width: 24px;
      height: 24px;
      color: var(--link-color);
      transition: 0.2s ease-in;
    }
    
    .right-side {
      margin-left: auto;
      flex-basis: 400px;
      height: 100%;
      padding: 16px;
      position: relative;
      transition: all 300ms cubic-bezier(0.19, 1, .........完整代码请登录后点击上方下载按钮下载查看