askbot-dragon 1.6.76-beta → 1.6.76

package/src/assets/less/converSationContainer/converSatonContainer.less

@@ -1,494 +1,487 @@
-@import "../converSationContainer/common";
-@import "../iconfont.css";
-.video-player{
-    width: 260px!important;
-}
-// .video-js .vjs-big-play-button{
-//     top: 50px!important;
-//     left: 90px!important;
-// }
-.el-cascader-node__label{
-    padding: 0;
-}
-.el-cascader-node__postfix{
-    right: 5px;
-}
-.el-cascader-node{
-    height: 24px;
-    line-height: 24px;
-    padding: 0 20px 0 5px;
-}
-.el-radio{
-    width: 100%;
-    margin: 5px 0px;
-}
-.conversation-container{
-    width: 400px;
-    z-index: 999;
-    .conversation-container-d {
-        //background-color: rgba(0, 0, 0, 0) !important;
-        // height: 0 !important;
-        height: 100vh;
-    }
-    .test-box {
-        height: 100vh;
-        background-color:#323232;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        .gr-header{
-            padding: 16px;
-            height: 16px;
-            flex: none;
-            border-bottom: solid 2px #424247;
-            display: flex;
-            justify-content: flex-start;
-            font-size: 16px;
-            .bot-name{
-                flex: auto;
-                text-align: left;
-                color: #ffffff;
-                i{
-                    margin-left: 10px;
-                    cursor: pointer;
-                    font-weight: bolder;
-                }
-            }
-            .el-icon-refresh{
-                flex: none;
-                width: 24px;
-                /*color: @system_fontcolor_red;*/
-                color: #409EFF;
-                font-weight: bolder;
-                cursor: pointer;
-            }
-            .el-icon-close{
-                flex: none;
-                width: 24px;
-                color: #409EFF;
-                font-weight: bolder;
-                cursor: pointer;
-            }
-        }
-        .mod-loading{
-            flex: none;
-            padding: 5px;
-            background: #fff;
-            font-size: 14px;
-            color: #5857579c;
-            em {
-                font-size: 16px;
-                position: relative;
-                top: 1px;
-                font-weight: bolder;
-                margin-left: 5px;
-            }
-        }
-        .fade-enter-active, .fade-leave-active {
-            transition: opacity .5s
-        }
-        .fade-enter, .fade-leave-active {
-            opacity: 0
-        }
-        .gr-content {
-            flex: auto;
-            overflow: auto;
-            padding: 8px;
-            ul{
-                padding: 8px 0;
-                .via-bot-outer{
-                    display: flex;
-                    justify-content: flex-start;
-                    .chat-content{
-                        border-radius: 0 8px 8px 8px;
-                        a {
-                            color: royalblue !important;
-                        }
-                        a:link{
-                            text-decoration: underline !important;
-                        }
-                        table{
-                            color: red !important;
-                            border: solid 1px red !important;
-                        }
-                    }
-                }
-                .via-user-outer{
-                    display: flex;
-                    justify-content: flex-end;
-                    .chat-content{
-                        border-radius:8px 0 8px 8px;
-                        background-color: @system_fontcolor_red;
-                        color: white;
-                    }
-                }
-                li{
-                    margin: 8px;
-                    .via{
-                        flex: none;
-                        height: 30px;
-                        width: 30px;
-                        border-radius: 0 15px 15px 15px;
-                        font-size: 28px;
-                        
-                    }
-                    .via-bot {
-                        border: solid 1px @system_fontcolor_sub;
-                        margin-right: 8px; 
-                        em {
-                            color: @system_fontcolor_sub;
-                        }
-                        
-                    }
-                    .via-user {
-                        border: solid 1px @system_fontcolor_red;
-                        margin-left: 8px; 
-                        em {
-                            color:@system_fontcolor_red;
-                        }
-                    }
-                    .chat-content{
-                        background-color: white;
-                        line-height: 26px;
-                        padding: 8px;
-                        max-width: 300px;
-                        font-size: 14px;
-                        text-align: left;
-                        word-wrap: break-word;
-                        
-                        
-                        .link-list-outer{
-                            font-size: 14px;
-                            .link-cell{
-                                line-height: 16px;
-                                display: block;
-                                color: @system_fontcolor_red;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        .gr-footer{
-            height: 32px;
-            padding: 8px;
-            flex: none;
-            .el-input{
-                .el-button{
-                    color: white;
-                    background-color: @system_fontcolor_red;
-                }
-            }
-        }
-    }
-
-}
-.dialog{
-    width: 51%;
-    margin: 0 auto;
-    background-color: #ffffff;
-    .list-paddingleft-2 {
-        padding-left: 16px !important;
-        color: hotpink;
-    }
-
-    ul,
-    ol,
-    li {
-        list-style-type: none;
-    }
-
-    ul, ul li {
-        list-style-type: disc !important;
-    }
-
-    ol, ol li{
-        list-style-type: decimal !important;
-    }
-
-    table,table tr th, table tr td {
-        border:1px solid #DDD !important;
-    }
-    table {
-        width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse !important;
-    }
-    .headerName{
-        padding: 20px;
-        text-align: center;
-    }
-    .dialogContent{
-        background-color: rgb(245, 245, 245);
-        height: calc(100vh - 170px);
-        display: flex;
-        flex-direction: column;
-        padding: 10px;
-        overflow-x: hidden;
-        overflow-y: auto;
-        .message-notice{
-            display: inline-block;
-            text-align: center;
-            margin-bottom: 20px;
-            width: 100%;
-            background-color: transparent !important;
-        }
-        .notice-content{
-            display: inline-block;
-            padding: 5px 10px;
-            border-radius: 5px;
-            background-color: #e8eaec;
-            color: #666666;
-            font-size: 12px;
-        }
-        .notice-content-day{
-            display: inline-block;
-            padding: 5px 10px;
-            .line-left{
-                display:inline-block;
-                width:100px;
-                height:1px;
-                margin-bottom: 5px;
-                margin-right: 5px;
-                //background:#dcdcdc;
-                background: -webkit-linear-gradient(left, #fff -4%,#666666 50%);
-
-            }
-            .line-text{
-                color: #666666;
-                font-size: 12px;
-            }
-            .line-right{
-                display:inline-block;
-                width:100px;
-                height:1px;
-                margin-bottom: 5px;
-                margin-left: 5px;
-                //background:#dcdcdc;
-                background: -webkit-linear-gradient(left,#666666 50%,#fff 100%);
-            }
-        }
-        //messages
-        .message{
-            display: flex;
-            margin-bottom: 20px;
-            justify-content:flex-start;
-            .user-detail{
-                display: flex;
-                align-items: flex-start;
-                .media-body{
-                    //max-width: calc(100vw - 800px);
-                    background-color: white;
-                    // border: 1px solid #e4e3e3;
-                    word-break: break-word;
-                    flex: 1;
-                    min-height: 25px;
-                    line-height: 25px;
-                    border-radius: 15px;
-                    border-top-left-radius: 0px;
-                    padding: 10px 10px 0 15px;
-                    text-align: left;
-
-                    h2{
-                        font-size: 18px;
-                    }
-                    p{
-                        margin-bottom: 5px;
-                        font-size: 14px;
-                        word-wrap:break-word;
-                        word-break:break-all;
-                        overflow: hidden;
-                    }
-                    .voicemessage{
-                        width: 200px;
-                        height: 35px;
-                        line-height: 35px;
-                        background-color: #e8eaec;
-                        border-radius: 10px;
-                        .icon-vioce{
-                            font-size: 24px;
-                            float: left;
-                            margin-left: 20px;
-                            margin-right: 20px;
-                        }
-                        .time{
-                            font-size: 14px;
-                            margin-left: 20px;
-                        }
-                    }
-                    span{
-                        margin-bottom: 5px;
-                        font-size: 12px;
-                        color: #a3a4a5;
-                        float: left;
-                    }
-                    .botname{
-                        margin-left: 10px;
-                        float: right;
-                    }
-                    .mb-0{
-                        margin-bottom: 0 !important;
-                        text-align: left;
-                        line-height: 1.3;
-                        margin-top: 0;
-                        font-size: 12px;
-                    }
-                }
-                .media-body-ps{
-                    //max-width: calc(100vw - 800px);
-                    background-color: #f8f8f8;
-                    border: 1px solid #e4e3e3;
-                    word-break: break-word;
-                    flex: 1;
-                    min-height: 25px;
-                    line-height: 25px;
-                    border-radius: 25px;
-                    border-top-left-radius: 0px;
-                    text-align: left;
-                    h2{
-                        font-size: 18px;
-                    }
-                    .other{
-                        margin-bottom: 5px;
-                        font-size: 14px;
-                        word-wrap:break-word;
-                        word-break:break-all;
-                        overflow: hidden;
-                        padding: 10px 10px 0 15px;
-                    }
-                    .ps{
-                        padding: 5px 10px 5px 15px;
-                        height: 25px;
-                        line-height: 25px;
-                        border-top: 1px solid #e4e3e3;
-                        background-color: #ffffff;
-                        color: #409eff;
-                        cursor:pointer;
-                    }
-                    .end{
-                        border-bottom-left-radius: 25px !important;
-                        border-bottom-right-radius: 25px !important;
-                    }
-                    .voicemessage{
-                        width: 200px;
-                        height: 35px;
-                        line-height: 35px;
-                        background-color: #e8eaec;
-                        border-radius: 10px;
-                        .icon-vioce{
-                            font-size: 24px;
-                            float: left;
-                            margin-left: 20px;
-                            margin-right: 20px;
-                        }
-                        .time{
-                            font-size: 14px;
-                            margin-left: 20px;
-                        }
-                    }
-                    span{
-                        margin-bottom: 5px;
-                        font-size: 12px;
-                        color: #a3a4a5;
-                        float: left;
-                    }
-                    .botname{
-                        margin-left: 10px;
-                        float: right;
-                    }
-                    .mb-0{
-                        margin-bottom: 0 !important;
-                        text-align: left;
-                        line-height: 1.3;
-                        margin-top: 0;
-                        font-size: 12px;
-                    }
-                }
-            }
-            .video-player ,.video-js .vjs-icon-placeholder {
-                width: 300px;
-                height: 172px;
-                display: block;
-            }
-            .el-image{
-                float:right;
-                width: 300px !important;
-                height: auto !important;
-            }
-        }
-        .message-kf{
-            display: flex;
-            margin-bottom: 20px;
-            justify-content:flex-end;
-            .user-detail{
-                display: flex;
-                align-items: flex-start;
-                .media-body{
-                    //max-width: calc(100vw - 800px);
-                    border:  1px solid #c1e5ff !important;
-                    background-color: #c1e5ff !important;
-                    word-break: break-word;
-                    flex: 1;
-                    min-height: 25px;
-                    line-height: 25px;
-                    border-radius: 15px;
-                    border-top-right-radius: 0px;
-                    padding: 10px 10px 0 10px;
-                    text-align: left;
-                    h2{
-                        font-size: 18px;
-                    }
-                    p{
-                        margin-bottom: 5px;
-                        font-size: 14px;
-                        word-wrap:break-word;
-                        word-break:break-all;
-                        overflow: hidden;
-                    }
-                    .voicemessage{
-                        width: 200px;
-                        height: 35px;
-                        line-height: 35px;
-                        background-color: #e8eaec;
-                        border-radius: 10px;
-                        .icon-vioce{
-                            font-size: 24px;
-                            float: left;
-                            margin-left: 20px;
-                            margin-right: 20px;
-                        }
-                        .time{
-                            font-size: 14px;
-                            margin-left: 20px;
-                        }
-                    }
-                    span{
-                        margin-bottom: 5px;
-                        font-size: 12px;
-                        color: #a3a4a5;
-                        float: right;
-                    }
-                    .botname{
-                        margin-left: 10px;
-                        float: right;
-                    }
-                    .mb-0{
-                        margin-bottom: 0 !important;
-                        text-align: left;
-                        line-height: 1.3;
-                        margin-top: 0;
-                        font-size: 12px;
-                    }
-                }
-            }
-            .video-player ,.video-js .vjs-icon-placeholder {
-                width: 300px;
-                height: 172px;
-                display: block;
-            }
-            .el-image{
-                float:right;
-                width: 300px !important;
-                height: auto !important;
-            }
-        }
-    }
+@import "../converSationContainer/common";
+@import "../iconfont.css";
+@import "../variables.less";
+.video-player{
+    width: 260px!important;
+}
+// .video-js .vjs-big-play-button{
+//     top: 50px!important;
+//     left: 90px!important;
+// }
+.el-cascader-node__label{
+    padding: 0;
+}
+.el-cascader-node__postfix{
+    right: 5px;
+}
+.el-cascader-node{
+    height: 24px;
+    line-height: 24px;
+    padding: 0 20px 0 5px;
+}
+.el-radio{
+    width: 100%;
+    margin: 5px 0px;
+}
+.conversation-container{
+    width: 400px;
+    z-index: 999;
+    .conversation-container-d {
+        //background-color: rgba(0, 0, 0, 0) !important;
+        // height: 0 !important;
+        height: 100vh;
+    }
+    .test-box {
+        height: 100vh;
+        background-color: @background-color-black;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        .gr-header{
+            padding: 16px;
+            height: 16px;
+            flex: none;
+            border-bottom: solid 2px @background-color-bubble-r2;
+            display: flex;
+            justify-content: flex-start;
+            font-size: 16px;
+            .bot-name{
+                flex: auto;
+                text-align: left;
+                color: @font-primary-light-color;
+                i{
+                    margin-left: 10px;
+                    cursor: pointer;
+                    font-weight: bolder;
+                }
+            }
+            .el-icon-refresh{
+                flex: none;
+                width: 24px;
+                color: @primary-color;
+                font-weight: bolder;
+                cursor: pointer;
+            }
+            .el-icon-close{
+                flex: none;
+                width: 24px;
+                color: @primary-color;
+                font-weight: bolder;
+                cursor: pointer;
+            }
+        }
+        .mod-loading{
+            flex: none;
+            padding: 5px;
+            background: @background-color-light;
+            font-size: 14px;
+            color: @font-primary-color-r1;
+            em {
+                font-size: 16px;
+                position: relative;
+                top: 1px;
+                font-weight: bolder;
+                margin-left: 5px;
+            }
+        }
+        .fade-enter-active, .fade-leave-active {
+            transition: opacity .5s
+        }
+        .fade-enter, .fade-leave-active {
+            opacity: 0
+        }
+        .gr-content {
+            flex: auto;
+            overflow: auto;
+            padding: 8px;
+            ul{
+                padding: 8px 0;
+                .via-bot-outer{
+                    display: flex;
+                    justify-content: flex-start;
+                    .chat-content{
+                        border-radius: 0 8px 8px 8px;
+                        a {
+                            color: @primary-color !important;
+                        }
+                        a:link{
+                            text-decoration: underline !important;
+                        }
+                        table{
+                            color: @font-primary-accent-color !important;
+                            border: solid 1px @font-primary-accent-color !important;
+                        }
+                    }
+                }
+                .via-user-outer{
+                    display: flex;
+                    justify-content: flex-end;
+                    .chat-content{
+                        border-radius:8px 0 8px 8px;
+                        background-color: @primary-color;
+                        color: @font-primary-light-color;
+                    }
+                }
+                li{
+                    margin: 8px;
+                    .via{
+                        flex: none;
+                        height: 30px;
+                        width: 30px;
+                        border-radius: 0 15px 15px 15px;
+                        font-size: 28px;
+                        
+                    }
+                    .via-bot {
+                        border: solid 1px @font-secondary-color;
+                        margin-right: 8px; 
+                        em {
+                            color: @font-secondary-color;
+                        }
+                        
+                    }
+                    .via-user {
+                        border: solid 1px @primary-color;
+                        margin-left: 8px; 
+                        em {
+                            color: @primary-color;
+                        }
+                    }
+                    .chat-content{
+                        background-color: @background-color-light;
+                        line-height: 26px;
+                        padding: 8px;
+                        max-width: 300px;
+                        font-size: 14px;
+                        text-align: left;
+                        word-wrap: break-word;
+                        
+                        
+                        .link-list-outer{
+                            font-size: 14px;
+                            .link-cell{
+                                line-height: 16px;
+                                display: block;
+                                color: @primary-color;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .gr-footer{
+            height: 32px;
+            padding: 8px;
+            flex: none;
+            .el-input{
+                .el-button{
+                    color: @font-primary-light-color;
+                    background-color: @primary-color;
+                }
+            }
+        }
+    }
+
+}
+.dialog{
+    width: 51%;
+    margin: 0 auto;
+    background-color: @background-color-light;
+    .list-paddingleft-2 {
+        padding-left: 16px !important;
+        color: @font-primary-accent-color;
+    }
+
+    ul,
+    ol,
+    li {
+        list-style-type: none;
+    }
+
+    ul, ul li {
+        list-style-type: disc !important;
+    }
+
+    ol, ol li{
+        list-style-type: decimal !important;
+    }
+
+    table,table tr th, table tr td {
+        border:1px solid @border-color-r4 !important;
+    }
+    table {
+        width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse !important;
+    }
+    .headerName{
+        padding: 20px;
+        text-align: center;
+    }
+    .dialogContent{
+        background-color: @background-color-drawer;
+        height: calc(100vh - 170px);
+        display: flex;
+        flex-direction: column;
+        padding: 10px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        .message-notice{
+            display: inline-block;
+            text-align: center;
+            margin-bottom: 20px;
+            width: 100%;
+            background-color: transparent !important;
+        }
+        .notice-content{
+            display: inline-block;
+            padding: 5px 10px;
+            border-radius: 5px;
+            background-color: @background-color-voice;
+            color: @font-primary-color-r2;
+            font-size: 12px;
+        }
+        .notice-content-day{
+            display: inline-block;
+            padding: 5px 10px;
+            .line-left{
+                display:inline-block;
+                width:100px;
+                height:1px;
+                margin-bottom: 5px;
+                margin-right: 5px;
+                background: -webkit-linear-gradient(left, @background-color-light -4%,@font-primary-color-r2 50%);
+            }
+            .line-text{
+                color: @font-primary-color-r2;
+                font-size: 12px;
+            }
+            .line-right{
+                display:inline-block;
+                width:100px;
+                height:1px;
+                margin-bottom: 5px;
+                margin-left: 5px;
+                background: -webkit-linear-gradient(left,@font-primary-color-r2 50%,@background-color-light 100%);
+            }
+        }
+        //messages
+        .message{
+            display: flex;
+            margin-bottom: 20px;
+            justify-content:flex-start;
+            .user-detail{
+                display: flex;
+                align-items: flex-start;
+                .media-body{
+                    background-color: @background-color-light;
+                    word-break: break-word;
+                    flex: 1;
+                    min-height: 25px;
+                    line-height: 25px;
+                    border-radius: 15px;
+                    border-top-left-radius: 0px;
+                    padding: 10px 10px 0 15px;
+                    text-align: left;
+
+                    h2{
+                        font-size: 18px;
+                    }
+                    p{
+                        margin-bottom: 5px;
+                        font-size: 14px;
+                        word-wrap:break-word;
+                        word-break:break-all;
+                        overflow: hidden;
+                    }
+                    .voicemessage{
+                        width: 200px;
+                        height: 35px;
+                        line-height: 35px;
+                        background-color: @background-color-voice;
+                        border-radius: 10px;
+                        .icon-vioce{
+                            font-size: 24px;
+                            float: left;
+                            margin-left: 20px;
+                            margin-right: 20px;
+                        }
+                        .time{
+                            font-size: 14px;
+                            margin-left: 20px;
+                        }
+                    }
+                    span{
+                        margin-bottom: 5px;
+                        font-size: 12px;
+                        color: @font-primary-color-r1;
+                        float: left;
+                    }
+                    .botname{
+                        margin-left: 10px;
+                        float: right;
+                    }
+                    .mb-0{
+                        margin-bottom: 0 !important;
+                        text-align: left;
+                        line-height: 1.3;
+                        margin-top: 0;
+                        font-size: 12px;
+                    }
+                }
+                .media-body-ps{
+                    background-color: @background-color-list-r2;
+                    border: 1px solid @border-color-r3;
+                    word-break: break-word;
+                    flex: 1;
+                    min-height: 25px;
+                    line-height: 25px;
+                    border-radius: 25px;
+                    border-top-left-radius: 0px;
+                    text-align: left;
+                    h2{
+                        font-size: 18px;
+                    }
+                    .other{
+                        margin-bottom: 5px;
+                        font-size: 14px;
+                        word-wrap:break-word;
+                        word-break:break-all;
+                        overflow: hidden;
+                        padding: 10px 10px 0 15px;
+                    }
+                    .ps{
+                        padding: 5px 10px 5px 15px;
+                        height: 25px;
+                        line-height: 25px;
+                        border-top: 1px solid @border-color-r3;
+                        background-color: @background-color-light;
+                        color: @primary-color;
+                        cursor:pointer;
+                    }
+                    .end{
+                        border-bottom-left-radius: 25px !important;
+                        border-bottom-right-radius: 25px !important;
+                    }
+                    .voicemessage{
+                        width: 200px;
+                        height: 35px;
+                        line-height: 35px;
+                        background-color: @background-color-voice;
+                        border-radius: 10px;
+                        .icon-vioce{
+                            font-size: 24px;
+                            float: left;
+                            margin-left: 20px;
+                            margin-right: 20px;
+                        }
+                        .time{
+                            font-size: 14px;
+                            margin-left: 20px;
+                        }
+                    }
+                    span{
+                        margin-bottom: 5px;
+                        font-size: 12px;
+                        color: @font-primary-color-r1;
+                        float: left;
+                    }
+                    .botname{
+                        margin-left: 10px;
+                        float: right;
+                    }
+                    .mb-0{
+                        margin-bottom: 0 !important;
+                        text-align: left;
+                        line-height: 1.3;
+                        margin-top: 0;
+                        font-size: 12px;
+                    }
+                }
+            }
+            .video-player ,.video-js .vjs-icon-placeholder {
+                width: 300px;
+                height: 172px;
+                display: block;
+            }
+            .el-image{
+                float:right;
+                width: 300px !important;
+                height: auto !important;
+            }
+        }
+        .message-kf{
+            display: flex;
+            margin-bottom: 20px;
+            justify-content:flex-end;
+            .user-detail{
+                display: flex;
+                align-items: flex-start;
+                .media-body{
+                    border: 1px solid @border-color-copy !important;
+                    background-color: @border-color-copy !important;
+                    word-break: break-word;
+                    flex: 1;
+                    min-height: 25px;
+                    line-height: 25px;
+                    border-radius: 15px;
+                    border-top-right-radius: 0px;
+                    padding: 10px 10px 0 10px;
+                    text-align: left;
+                    h2{
+                        font-size: 18px;
+                    }
+                    p{
+                        margin-bottom: 5px;
+                        font-size: 14px;
+                        word-wrap:break-word;
+                        word-break:break-all;
+                        overflow: hidden;
+                    }
+                    .voicemessage{
+                        width: 200px;
+                        height: 35px;
+                        line-height: 35px;
+                        background-color: @background-color-voice;
+                        border-radius: 10px;
+                        .icon-vioce{
+                            font-size: 24px;
+                            float: left;
+                            margin-left: 20px;
+                            margin-right: 20px;
+                        }
+                        .time{
+                            font-size: 14px;
+                            margin-left: 20px;
+                        }
+                    }
+                    span{
+                        margin-bottom: 5px;
+                        font-size: 12px;
+                        color: @font-primary-color-r1;
+                        float: right;
+                    }
+                    .botname{
+                        margin-left: 10px;
+                        float: right;
+                    }
+                    .mb-0{
+                        margin-bottom: 0 !important;
+                        text-align: left;
+                        line-height: 1.3;
+                        margin-top: 0;
+                        font-size: 12px;
+                    }
+                }
+            }
+            .video-player ,.video-js .vjs-icon-placeholder {
+                width: 300px;
+                height: 172px;
+                display: block;
+            }
+            .el-image{
+                float:right;
+                width: 300px !important;
+                height: auto !important;
+            }
+        }
+    }
 }