Spaces:
Runtime error
Runtime error
| * { margin: 0; padding: 0; } | |
| body { | |
| background: #f0f1f2; | |
| font:12px "Helvetica Neue", Impact, sans-serif; | |
| } | |
| #view-code{ | |
| color:#89a2b5; | |
| opacity:0.7; | |
| font-size:14px; | |
| text-transform:uppercase; | |
| font-weight:700; | |
| text-decoration:none; | |
| position:absolute;top:660px; | |
| left:50%;margin-left:-50px; | |
| z-index:200; | |
| } | |
| #view-code:hover{opacity:1;} | |
| #chatbox{ | |
| width:290px; | |
| background:#fff; | |
| border-radius:6px; | |
| overflow:hidden; | |
| height:484px; | |
| position:absolute; | |
| top:100px; | |
| left:50%; | |
| margin-left:-155px; | |
| box-shadow: 2px 2px 15px rgb(50 50 50 / 10%) | |
| } | |
| #friendslist{ | |
| position:absolute; | |
| top:0; | |
| left:0; | |
| width:290px; | |
| height:484px; | |
| display: block; | |
| } | |
| #topmenu{ | |
| height:69px; | |
| width:290px; | |
| border-bottom:1px solid #d8dfe3; | |
| } | |
| #topmenu span{ | |
| float:left; | |
| width: 96px; | |
| height: 70px; | |
| background: url("https://static.ai-research.id/images/top-menu.png") -3px -118px no-repeat; | |
| } | |
| #topmenu span.friends{margin-bottom:-1px;} | |
| #topmenu span.chats{background-position:-95px 25px; cursor:pointer;} | |
| #topmenu span.chats:hover{background-position:-95px -46px; cursor:pointer;} | |
| #topmenu span.history{background-position:-190px 24px; cursor:pointer;} | |
| #topmenu span.history:hover{background-position:-190px -47px; cursor:pointer;} | |
| .friend{ | |
| height:70px; | |
| border-bottom:1px solid #e7ebee; | |
| position:relative; | |
| } | |
| .friend:hover{ | |
| background:#f1f4f6; | |
| cursor:pointer; | |
| } | |
| .friend img{ | |
| width:40px; | |
| border-radius:50%; | |
| margin:15px; | |
| float:left; | |
| } | |
| .floatingImg{ | |
| width:40px; | |
| border-radius:50%; | |
| position:absolute; | |
| top:0; | |
| left:12px; | |
| border:3px solid #fff; | |
| } | |
| .friend p{ | |
| padding:15px 0 0 0; | |
| float:left; | |
| width:220px; | |
| } | |
| .friend p strong{ | |
| display: block; | |
| font-weight:600; | |
| font-size:15px; | |
| color:#597a96; | |
| } | |
| .friend p span{ | |
| display: block; | |
| font-size:13px; | |
| font-weight:400; | |
| color:#aab8c2; | |
| } | |
| .friend .status{ | |
| background:#26c281; | |
| border-radius:50%; | |
| width:9px; | |
| height:9px; | |
| position:absolute; | |
| top:31px; | |
| right:17px; | |
| } | |
| .friend .status.away{background:#ffce54;} | |
| .friend .status.inactive{background:#eaeef0;} | |
| #search{ | |
| background:#e3e9ed url("https://static.ai-research.id/images/search.png") -11px 0 no-repeat; | |
| height:60px; | |
| width:290px; | |
| position:absolute; | |
| bottom:0; | |
| left:0; | |
| } | |
| #searchfield{ | |
| background:#e3e9ed; | |
| margin:21px 0 0 55px; | |
| border:none; | |
| padding:0; | |
| font-size:14px; | |
| font-family:"Helvetica Neue", Impact, sans-serif; | |
| font-weight:normal; | |
| color:#8198ac; | |
| } | |
| #searchfield:focus{ | |
| outline: 0; | |
| } | |
| #chatview{ | |
| width:290px; | |
| height:484px; | |
| position:absolute; | |
| top:0; | |
| left:0; | |
| display:none; | |
| background:#fff; | |
| } | |
| #profile{ | |
| height:153px; | |
| overflow:hidden; | |
| text-align:left; | |
| color:#fff; | |
| } | |
| .p1 #profile{ | |
| background:#fff url("https://static.ai-research.id/images/flower.jpg") 0 0 no-repeat; | |
| background-size: 300px 210px; | |
| } | |
| #profile .avatar{ | |
| width:68px; | |
| border:3px solid #fff; | |
| margin:23px 0 0; | |
| border-radius:50%; | |
| } | |
| #profile p{ | |
| font-weight:600; | |
| font-size:15px; | |
| margin:118px 0 -1px 15px; | |
| opacity:0; | |
| -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| } | |
| #profile p.animate{ | |
| margin-top:97px; | |
| opacity:1; | |
| -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| } | |
| #profile span{ | |
| font-weight:400; | |
| font-size:11px; | |
| margin: 0 0 0 15px; | |
| } | |
| #friends .persona_id { | |
| display: none; | |
| } | |
| #chat-block { | |
| height: 290px; | |
| overflow: auto; | |
| background: rgb(248,251,255); | |
| } | |
| .chat_messages{ | |
| opacity:0; | |
| margin-top:30px; | |
| width:290px; | |
| overflow-y:scroll; | |
| overflow-x:hidden; | |
| padding-right: 20px; | |
| -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| } | |
| #chat-block .animate{ | |
| opacity:1; | |
| margin-top:0; | |
| } | |
| #chat-block label{ | |
| color:#aab8c2; | |
| font-weight:600; | |
| font-size:12px; | |
| text-align:center; | |
| margin:15px 0; | |
| width:290px; | |
| display:block; | |
| } | |
| #chat-block div.message{ | |
| padding:10px 0 10px 48px; | |
| clear:both; | |
| margin:0 10px 0 0; | |
| } | |
| #chat-block div.message.right{ | |
| padding: 10px 65px 10px 0; | |
| margin-right: -19px; | |
| margin-left: 19px; | |
| } | |
| #chat-block .message img{ | |
| float: left; | |
| margin-left: -38px; | |
| border-radius: 50%; | |
| width: 30px; | |
| margin-top: 10px; | |
| } | |
| #chat-block div.message.right img{ | |
| float: right; | |
| margin-left: 0; | |
| margin-right: -38px; | |
| } | |
| .message .bubble{ | |
| background:#e0e7f4; | |
| font-size:13px; | |
| font-weight:600; | |
| padding:8px 8px; | |
| border-radius:5px 5px 5px 0; | |
| color:#8495a3; | |
| position:relative; | |
| float:left; | |
| } | |
| #chat-block div.message.right .bubble{ | |
| float:right; | |
| border-radius:5px 5px 0 5px ; | |
| background: #e0f4e7; | |
| } | |
| .bubble .corner{ | |
| background:url("https://static.ai-research.id/images/bubble-corner.png") 0 0 no-repeat; | |
| position:absolute; | |
| width:7px; | |
| height:7px; | |
| left:-5px; | |
| bottom:0; | |
| } | |
| div.message.right .corner{ | |
| background:url("https://static.ai-research.id/images/bubble-cornerR.png") 0 0 no-repeat; | |
| left:auto; | |
| right:-5px; | |
| } | |
| .bubble span{ | |
| color: #aab8c2; | |
| font-size: 11px; | |
| position: absolute; | |
| right: 0; | |
| bottom: -22px; | |
| } | |
| #sendmessage{ | |
| height:40px; | |
| border-top:1px solid #e7ebee; | |
| position:absolute; | |
| bottom:0; | |
| right:0; | |
| width:290px; | |
| background:#fff; | |
| padding-bottom:0; | |
| } | |
| #sendmessage input{ | |
| background:#fff; | |
| margin:8px 0 0 10px; | |
| border:none; | |
| padding:0; | |
| font-size:14px; | |
| font-family:"Helvetica Neue", Impact, sans-serif; | |
| font-weight:normal; | |
| color:#aab8c2; | |
| width: 250px; | |
| } | |
| #sendmessage input:focus{ | |
| outline: 0; | |
| } | |
| #sendmessage button{ | |
| background:#fff url("https://static.ai-research.id/images/send.png") 0 -41px no-repeat; | |
| width:30px; | |
| height:30px; | |
| position:absolute; | |
| right: 0; | |
| top: 14px; | |
| border:none; | |
| } | |
| #sendmessage button:hover{ | |
| cursor:pointer; | |
| background-position: 0 0 ; | |
| } | |
| #sendmessage button:focus{ | |
| outline: 0; | |
| } | |
| #close{ | |
| position:absolute; | |
| top: 8px; | |
| opacity:0.8; | |
| right: 15px; | |
| width:20px; | |
| height:20px; | |
| cursor:pointer; | |
| display: block; | |
| } | |
| #close:hover{ | |
| opacity:1; | |
| } | |
| #personalities{ | |
| position:absolute; | |
| top: 110px; | |
| opacity:0.8; | |
| right: 95px; | |
| width:20px; | |
| height:20px; | |
| cursor:pointer; | |
| display: block; | |
| } | |
| #personalities:hover{ | |
| opacity:1; | |
| } | |
| #parameters{ | |
| position:absolute; | |
| top: 110px; | |
| opacity:0.8; | |
| right: 55px; | |
| width:20px; | |
| height:20px; | |
| cursor:pointer; | |
| display: block; | |
| } | |
| #parameters:hover{ | |
| opacity:1; | |
| } | |
| #about{ | |
| position:absolute; | |
| top: 110px; | |
| opacity:0.8; | |
| right: 15px; | |
| width:20px; | |
| height:20px; | |
| cursor:pointer; | |
| display: block; | |
| } | |
| #about:hover{ | |
| opacity:1; | |
| } | |
| .cx, .cy{ | |
| background:#fff; | |
| position:absolute; | |
| width:0; | |
| top:15px; | |
| right:15px; | |
| height:3px; | |
| -webkit-transition: all 250ms ease-in-out; | |
| -moz-transition: all 250ms ease-in-out; | |
| -o-transition: all 250ms ease-in-out; | |
| transition: all 250ms ease-in-out; | |
| } | |
| .cx.s1, .cy.s1{ | |
| right:0; | |
| width:20px; | |
| -webkit-transition: all 100ms ease-out; | |
| -moz-transition: all 100ms ease-out; | |
| -o-transition: all 100ms ease-out; | |
| transition: all 100ms ease-out; | |
| } | |
| .cy.s2{ | |
| -ms-transform: rotate(50deg); | |
| -webkit-transform: rotate(50deg); | |
| transform: rotate(50deg); | |
| -webkit-transition: all 100ms ease-out; | |
| -moz-transition: all 100ms ease-out; | |
| -o-transition: all 100ms ease-out; | |
| transition: all 100ms ease-out; | |
| } | |
| .cy.s3{ | |
| -ms-transform: rotate(45deg); | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| -webkit-transition: all 100ms ease-out; | |
| -moz-transition: all 100ms ease-out; | |
| -o-transition: all 100ms ease-out; | |
| transition: all 100ms ease-out; | |
| } | |
| .cx.s1{ | |
| right:0; | |
| width:20px; | |
| -webkit-transition: all 100ms ease-out; | |
| -moz-transition: all 100ms ease-out; | |
| -o-transition: all 100ms ease-out; | |
| transition: all 100ms ease-out; | |
| } | |
| .cx.s2{ | |
| -ms-transform: rotate(140deg); | |
| -webkit-transform: rotate(140deg); | |
| transform: rotate(140deg); | |
| -webkit-transition: all 100ms ease-out; | |
| -moz-transition: all 100ms ease-out; | |
| -o-transition: all 100ms ease-out; | |
| transition: all 100ms ease-out; | |
| } | |
| .cx.s3{ | |
| -ms-transform: rotate(135deg); | |
| -webkit-transform: rotate(135deg); | |
| transform: rotate(135deg); | |
| -webkit-transition: all 100ms ease-out; | |
| -moz-transition: all 100ms ease-out; | |
| -o-transition: all 100ms ease-out; | |
| transition: all 100ms ease-out; | |
| } | |
| #chatview, #sendmessage { | |
| overflow:hidden; | |
| border-radius:6px; | |
| } | |
| .col-3 { | |
| float: left; | |
| position: relative; | |
| margin: 10px; | |
| } | |
| input[type="text"] { | |
| font: 15px/24px "Helvetica Neue", Impact, sans-serif; | |
| color: #333; | |
| width: 100%; | |
| box-sizing: border-box; | |
| letter-spacing: 1px; | |
| } | |
| #config-block { | |
| color: rgb(50, 100, 50); | |
| height: 100%; | |
| /*background: linear-gradient(0deg, rgba(186,183,226,1) 1%, rgba(255,213,198,1) 100%);*/ | |
| /* | |
| background: rgb(251,255,248); | |
| background: linear-gradient(135deg, rgba(251,255,248,1) 1%, rgba(107,235,131,1) 100%); | |
| */ | |
| background: rgb(248,251,255); | |
| background: linear-gradient(135deg, rgba(248,251,255,1) 1%, rgba(107,160,235,1) 100%); | |
| } | |
| #config-block input { | |
| color: rgb(50, 100, 50); | |
| font: 14px/24px "Helvetica Neue", Impact, sans-serif; | |
| padding: 0 5px 0 5px; | |
| } | |
| #config-block button { | |
| color: rgb(50, 100, 50); | |
| padding: 4px 8px; | |
| } | |
| #config-block > div { | |
| display: none; | |
| } | |
| #photo-block { | |
| display: none; | |
| } | |
| #photo-block img { | |
| position:absolute; | |
| top: 80px; | |
| width: 210px; | |
| left: 35px; | |
| z-index: 10; | |
| border-radius:50%; | |
| border:5px solid #fff; | |
| } | |
| #personalities_view, #parameters_view, #about_view { | |
| padding: 10px 10px 0 10px; | |
| } | |
| #server_view { | |
| position: absolute; | |
| bottom: 8px; | |
| padding: 0 10px; | |
| } | |
| #personalities_view div, #personalities_view h3, #parameters_view div, #parameters_view h3 { | |
| margin-bottom: 5px; | |
| } | |
| #personalities_view .input { | |
| -webkit-box-shadow: 2px 2px 10px 2px rgba(100,100,100,0.45); | |
| box-shadow: 2px 2px 2px 2px rgba(100,100,100,0.2); | |
| } | |
| #personalities_button, #parameters_button{ | |
| margin: 10px 0; | |
| } | |
| #parameters_view #doSample { | |
| display: inline; | |
| width: 30px; | |
| } | |
| #parameters_view input { | |
| display: block; | |
| margin-left: 10px; | |
| width: 95%; | |
| } | |
| #about_button { | |
| position:absolute; | |
| bottom:20px; | |
| left:42%; | |
| } | |
| #about_view { | |
| font-family: "Helvetica Neue", Impact, sans-serif; | |
| font-size: 1.1em; | |
| text-align: center; | |
| margin: 0 0 0 0; | |
| clear: both; | |
| height: 100%; | |
| } | |
| #about_view h3 { | |
| text-shadow: 3px 3px 5px rgb(150, 150, 150); | |
| letter-spacing: 0.02em; | |
| text-transform: uppercase; | |
| text-align: center; | |
| font-size: 1.5em; | |
| margin: 0 0 20px 0; | |
| } | |
| #about_view div { | |
| margin: 0 0 5px 0; | |
| } | |
| #about_view div div { | |
| margin: 0 0 15px 0; | |
| } | |
| #about_view a { | |
| color: rgb(50, 100, 50); | |
| font-weight: bold; | |
| } | |
| #about_view span { | |
| display: block; | |
| } | |
| /** Fontawesome **/ | |
| .list-unstyled { | |
| padding-left: 0; | |
| list-style: none; | |
| } | |
| .list-inline li { | |
| display: inline-block; | |
| padding-right: 5px; | |
| padding-left: 5px; | |
| margin-bottom: 10px; | |
| } | |
| /*---- Genral classes end -------*/ | |
| /*Change icons size here*/ | |
| .social-icons .fas { | |
| font-size: 1.5em; | |
| } | |
| /*Change icons circle size and color here*/ | |
| .social-icons .fas { | |
| width: 35px; | |
| height: 35px; | |
| line-height: 35px; | |
| text-align: center; | |
| color: rgba(100, 255, 100, 0.99); | |
| -webkit-transition: all 0.3s ease-in-out; | |
| -moz-transition: all 0.3s ease-in-out; | |
| -ms-transition: all 0.3s ease-in-out; | |
| -o-transition: all 0.3s ease-in-out; | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .social-icons.icon-circle .fas { | |
| border-radius: 50%; | |
| } | |
| .social-icons.icon-rounded .fas { | |
| border-radius:5px; | |
| } | |
| .social-icons.icon-flat .fas { | |
| border-radius: 0; | |
| } | |
| .social-icons .fas:hover, .social-icons .fas:active { | |
| color: rgba(250, 250, 120, 0.99); | |
| -webkit-box-shadow: 1px 1px 3px #333; | |
| -moz-box-shadow: 1px 1px 3px #333; | |
| box-shadow: 1px 1px 3px #333; | |
| } | |
| .social-icons.icon-zoom .fas:hover, .social-icons.icon-zoom .fas:active { | |
| -webkit-transform: scale(1.5); | |
| -moz-transform: scale(1.5); | |
| -ms-transform: scale(1.5); | |
| -o-transform: scale(1.5); | |
| transform: scale(1.5); | |
| } | |
| .social-icons.icon-rotate .fas:hover, .social-icons.icon-rotate .fas:active { | |
| -webkit-transform: scale(1.1) rotateY(180deg); | |
| -moz-transform: scale(1.1) rotateY(180deg); | |
| -ms-transform: scale(1.1) rotateY(180deg); | |
| -o-transform: scale(1.1) rotateY(180deg); | |
| transform: scale(1.1) rotateY(180deg); | |
| } | |
| .social-icons .fa-address-card { | |
| color: rgba(250, 250, 250, 0.99); | |
| background-color:#aeb5c5; | |
| } | |
| .social-icons .fa-sliders { | |
| color: rgba(250, 250, 250, 0.99); | |
| background-color:#aeb5c5; | |
| } | |
| .social-icons .fa-info { | |
| color: rgba(250, 250, 250, 0.99); | |
| background-color:#aeb5c5; | |
| } | |
| .social-icons .fa-house-chimney { | |
| color: rgba(250, 250, 250, 0.99); | |
| background-color:#aeb5c5; | |
| } |