chansung's picture
Create styles.py
e81baf6
raw
history blame
6.83 kB
PARENT_BLOCK_CSS = """
#col-container {
width: 95%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#chatbot {
height: 800px;
overflow: auto;
}
#chatbot > .wrap {
max-height: 780px;
}
"""
MODEL_SELECTION_CSS = """
.template-txt {
text-align: center;
font-size: 15pt !important;
}
.message {
margin: 0px !important;
}
.load-mode-selector:nth-child(3) {
margin: auto !important;
text-align: center !important;
width: fit-content !important;
}
code {
white-space: break-spaces !important;
}
.progress-view {
background: transparent !important;
border-radius: 25px !important;
}
#landing-container {
width: 85%;
margin: auto;
}
.landing-btn {
font-size: 2.3vw !important;
margin-top: 25px !important;
border-radius: 25px !important;
height: 120px !important;
@media screen and (max-width: 1000px) {
font-size: 20px !important;
}
}
#landing-bottom {
margin-top: 20px !important;
}
.custom-btn {
border: none !important;
background: none !important;
box-shadow: none !important;
display: block !important;
text-align: left !important;
}
.custom-btn:hover {
background: rgb(243 244 246) !important;
}
.custom-btn-highlight {
border: none !important;
background: rgb(243 244 246) !important;
box-shadow: none !important;
display: block !important;
text-align: left !important;
@media (prefers-color-scheme: dark) {
background-color: rgba(17,24,39,255) !important;
}
}
#prompt-txt > label > span {
display: none !important;
}
#prompt-txt > label > textarea {
border: transparent;
border-radius: 20px;
}
#chatbot {
height: 800px !important;
overflow: auto;
box-shadow: none !important;
border: none !important;
}
#chatbot > .wrap {
max-height: 780px !important;
}
#chatbot + div {
border-radius: 35px !important;
width: 80% !important;
margin: auto !important;
}
#left-pane {
background-color: #f9fafb;
border-radius: 15px;
padding: 10px;
@media (prefers-color-scheme: dark) {
background-color: rgba(31,41,55,255) !important;
}
}
#left-top {
padding-left: 10px;
padding-right: 10px;
text-align: center;
font-weight: bold;
font-size: large;
}
#chat-history-accordion {
background: transparent;
border: 0.8px !important;
}
#right-pane {
margin-left: 20px;
margin-right: 20px;
background: white;
border-radius: 20px;
@media (prefers-color-scheme: dark) {
background-color: rgba(31,41,55,255) !important;
}
@media screen and (max-width: 1000px) {
margin: 0px !important;
}
}
#initial-popup {
z-index: 100;
position: absolute;
width: 50%;
top: 50%;
height: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 35px;
padding: 15px;
}
#initial-popup-title {
text-align: center;
font-size: 18px;
font-weight: bold;
}
#initial-popup-left-pane {
min-width: 150px !important;
}
#initial-popup-right-pane {
text-align: right;
}
.example-btn {
padding-top: 20px !important;
padding-bottom: 20px !important;
padding-left: 5px !important;
padding-right: 5px !important;
background: linear-gradient(to bottom right, #f7faff, #ffffff) !important;
box-shadow: none !important;
border-radius: 20px !important;
@media (prefers-color-scheme: dark) {
background: rgba(70,79,86,255) !important;
}
}
.example-btn:hover {
box-shadow: 0.3px 0.3px 0.3px gray !important;
@media (prefers-color-scheme: dark) {
background: rgba(34,37,42,255) !important;
}
}
.example-btn:active {
@media (prefers-color-scheme: dark) {
background: rgba(70,79,86,255) !important;
}
}
#example-title {
margin-bottom: 15px;
}
#aux-btns-popup {
z-index: 200;
position: absolute !important;
bottom: 75px !important;
right: 40px !important;
}
#aux-btns-popup > div {
flex-wrap: nowrap;
width: fit-content;
margin: auto;
}
.aux-btn {
height: 30px !important;
flex-wrap: initial !important;
flex: none !important;
min-width: min(100px,100%) !important;
font-weight: unset !important;
font-size: 10pt !important;
background: linear-gradient(to bottom right, #f7faff, #ffffff) !important;
box-shadow: none !important;
border-radius: 20px !important;
opacity: 0.5;
border-width: 0.5px;
border-color: grey;
@media (prefers-color-scheme: dark) {
opacity: 0.2 !important;
color: black !important;
}
}
.aux-btn:hover {
opacity: 1.0;
box-shadow: 0.3px 0.3px 0.3px gray !important;
@media (prefers-color-scheme: dark) {
opacity: 1.0 !important;
box-shadow: 0.3px 0.3px 0.3px gray !important;
}
}
#aux-viewer {
position: absolute !important;
border-style: solid !important;
overflow: visible !important;
border: none !important;
box-shadow: none !important;
z-index: 1000 !important;
opacity: 0.0 !important;
width: 75% !important;
right: 1px !important;
transition: all 0.5s;
}
#aux-viewer:hover {
opacity: 1.0 !important;
box-shadow: 0px 0.5px 0px 0px gray !important;
}
#aux-viewer > .label-wrap {
justify-content: end;
}
#aux-viewer > .label-wrap > span {
margin-right: 10px;
}
#aux-viewer-inspector {
padding: 0px;
}
#aux-viewer-inspector > label > span {
display: none !important;
}
#aux-viewer-inspector > label > textarea {
box-shadow: none;
border-color: transparent;
}
#global-context > label > span {
display: none !important;
}
#chat-back-btn {
background: transparent !important;
}
#chat-back-btn:hover {
@media (prefers-color-scheme: dark) {
background: rgb(75,85,99) !important;
}
}
#chat-back-btn:active {
@media (prefers-color-scheme: dark) {
background: transparent !important;
}
}
#col-container {
max-width: 70%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
#container {
max-width: 70%;
margin: auto;
}
#container2 {
max-width: 60%;
margin: auto;
}
#container3 {
max-width: 60%;
margin: auto;
}
.square {
height: 100px;
@media (prefers-color-scheme: dark) {
background-color: rgba(70,79,86,255) !important;
}
}
.square:hover {
@media (prefers-color-scheme: dark) {
background-color: rgba(34,37,42,255) !important;
}
}
.square:active {
@media (prefers-color-scheme: dark) {
background-color: rgba(70,79,86,255) !important;
}
}
.placeholders {
min-width: max-content !important;
}
.placeholders > button {
border-color: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
cursor: default !important;
}
.center {
text-align: center;
overflow: hidden;
}
.sub-container > div {
min-width: max-content !important;
}
"""