Skip to content

Administrator / chatgpt.ai-pro.org

Go to a project
Toggle navigation
Toggle navigation pinning
f00232ef by RSA
Options

UI

1 parent b4756f32
Inline Side-by-side
Showing 3 changed files with 121 additions and 57 deletions
client/src/App.css
......@@ -9,7 +9,7 @@
.sidemenu {
width:260px;
padding:10px;
background-color: #101827;
background-color: #202123;
}
/* under 640px do this */
@media (max-width: 640px) {
......@@ -20,18 +20,11 @@
.side-menu-button {
padding:12px;
border:1px solid white;
border-radius:5px;
text-align: left;
transition:ease 0.25s all;
cursor:pointer;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cedbe9+0,aac5de+17,6199c7+50,3a84c3+51,419ad6+59,4bb8f0+71,3a8bc2+84,26558b+100;Blue+Gloss */
background: rgb(206,219,233); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(206,219,233,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
text-shadow: 1px 1px 0px black;
font-weight: 500;
}
.side-menu-button:hover {
background-color:rgba(255,255,255,0.1);
......@@ -41,17 +34,10 @@
padding-right:12px;
}
span.info {
text-align: left;
width: 100% !important;
display: block;
padding: 10px;
line-height: 1.5;
}
.chatbox {
flex:1;
background-color:#ffffff;
background-color:#343541;
position:relative;
overflow-y:scroll;
padding-bottom:95px;
......@@ -69,22 +55,22 @@ span.info {
}
.chat-input-holder {
padding:15px;
padding:24px;
position:absolute;
bottom:0;
left:0;right:0;
background: rgb(57 57 57);
}
.chat-input-textarea {
background-color: #dddddd;
background-color: #40414f;
width: 90%;
padding: 12px;
border-radius: 5px;
color: #101827;
font-size: 16px;
color: #ffffff;
font-size: 1.25em;
border: none;
outline: none;
box-shadow: 0px 7px 6px -6px black;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.25);
}
.App-header {
......@@ -117,15 +103,15 @@ span.info {
margin-left:auto;
margin-right:auto;
display:flex;
padding: 20px 10px;
padding: 12px 24px;
}
section::-webkit-scrollbar {
display: none;
}
.avatar {
background:#6BA447;
border-radius:5px;
background:#ffffff;
border-radius:50%;
width: 40px;
height: 40px;
display:flex;
......@@ -134,29 +120,19 @@ section::-webkit-scrollbar {
padding:5px;
font-size:14px;
color:#444654;
box-shadow: 0px 5px 5px -3px black;
}
.avatar.chatgpt {
background:#667DF1;
border-radius:5px;
background:#0da37f;
border-radius:50%;
min-width: 40px;
min-height: 40px;
padding:5px;
color:white;
box-shadow: 0px 5px 5px -3px black;
}
.message {
padding: 7px 20px;
line-height: 25px;
font-size: 14px;
font-family: "Poppins", "Karla", sans-serif;
color: #353b4f;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased !important;
-moz-font-smoothing: antialiased !important;
text-rendering: optimizelegibility !important;
}
.chat-message.false {
......@@ -173,20 +149,19 @@ section::-webkit-scrollbar {
}
.select-models {
padding:5px 10px;
background: #4d4f54;
border: 1px solid white;
padding: 12px;
border-radius:5px;
color: #5c6aa5;
background: #ffffff;
color: white;
background: transparent;
outline:none;
cursor:pointer;
max-width:100%;
min-width:100%;
}
.select-models option {
background: #2c374b;
background: black;
color: #ffffff;
font-size: 12px;
}
.button-picker {
......@@ -194,7 +169,7 @@ section::-webkit-scrollbar {
padding:6px 12px ;
border-radius:5px;
color:white;
background:#5c6aa5;
background:#444654;
margin-top:6px;
cursor: pointer;
}
......@@ -238,20 +213,7 @@ section::-webkit-scrollbar {
color:white;
border-radius:5px;
cursor: pointer;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */
background: rgb(180,221,180); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
box-shadow: 0 10px 12px -8px black;
}
.submit:hover {
background:#066d55;
}
.ai-logo-container {
text-align: center;
padding: 10px 0;
}
\ No newline at end of file
......
client/src/App.js
import './normal.css';
import './App.css';
import './color_theme_1.css';
import { useState, useEffect } from 'react';
import SideMenu from './SideMenu'
import ChatBox from './ChatBox'
......
client/src/color_theme_1.css 0 → 100644
.sidemenu {
background-color: #101827 !important;
}
.side-menu-button {
border:0 solid white;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cedbe9+0,aac5de+17,6199c7+50,3a84c3+51,419ad6+59,4bb8f0+71,3a8bc2+84,26558b+100;Blue+Gloss */
background: rgb(206,219,233); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(206,219,233,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
text-shadow: 1px 1px 0px black;
font-weight: 500;
}
span.info {
text-align: left;
width: 100% !important;
display: block;
padding: 10px;
line-height: 1.5;
}
.chatbox {
background-color:#ffffff !important;
}
.chat-input-holder {
padding:15px !important;
background: rgb(57 57 57) !important;
}
.chat-input-textarea {
background-color: #dddddd !important;
color: #101827 !important;
font-size: 16px !important;
box-shadow: 0px 7px 6px -6px black !important;
}
.chat-message.chatgpt {
background-color:#ffffff !important;
}
.chat-message-center {
padding: 20px 10px !important;
}
.avatar {
background:#6BA447 !important;
border-radius:5px !important;
box-shadow: 0px 5px 5px -3px black !important;
}
.avatar.chatgpt {
background:#667DF1 !important;
border-radius:5px !important;
box-shadow: 0px 5px 5px -3px black !important;
}
.message {
padding: 7px 20px !important;
line-height: 25px;
font-size: 14px;
font-family: "Poppins", "Karla", sans-serif;
color: #353b4f;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased !important;
-moz-font-smoothing: antialiased !important;
text-rendering: optimizelegibility !important;
}
.select-models {
padding:5px 10px !important;
background: #4d4f54 !important;
color: #5c6aa5 !important;
background: #ffffff !important;
border: 0 solid white;
}
.select-models option {
background: #2c374b !important;
color: #ffffff;
font-size: 12px;
}
.button-picker {
background:#5c6aa5 !important;
}
.submit {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */
background: rgb(180,221,180); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
box-shadow: 0 10px 12px -8px black;
}
.ai-logo-container {
text-align: center;
padding: 10px 0;
}
\ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!