Spaces:
Running
Running
@tailwind base; | |
@tailwind components; | |
@tailwind utilities; | |
:root { | |
--text-color: #f9fafb; | |
--background-color: #181f26; | |
--input-color: #1f2937; /* lighter */ | |
--button-color: #374151; /* lighter */ | |
--button-hover-color: #4b5563; /* lighter */ | |
--scrollbar-color: rgba(155, 155, 155, 0.7); | |
--chatbox-color: #2f3e46; | |
--message-border-colors: #e25e5b, #f29062, #ffc068, #ffe7dc, #71cbe8, #444292; | |
--message-text-color: var(--text-color); | |
} | |
body { | |
margin: 0; | |
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', | |
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
background-color: var(--background-color); | |
color: var(--text-color); | |
display: flex; | |
flex-direction: column; | |
height: 100vh; | |
margin: 0; | |
} | |
body.light { | |
--text-color: #111827; | |
--background-color: #f9fafb; | |
--input-color: #f1f5f9; | |
--button-color: #e5e7eb; | |
--button-hover-color: #d1d5db; | |
--scrollbar-color: rgba(100, 100, 100, 0.7); | |
--chatbox-color: #64748b; | |
--message-border-colors: #e25e5b, #f29062, #ffc068, #ffe7dc, #71cbe8, #444292; | |
--message-text-color: #f9fafb; | |
} | |
code { | |
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; | |
} | |
#topbar { | |
height: 60px; | |
} | |
#layout { | |
height: calc(100vh - 60px); | |
} | |
#textarea { | |
color: var(--text-color); | |
background-color: var(--input-color); | |
width: 100%; | |
height: calc(100vh - 180px); | |
} | |
.config-input { | |
color: var(--text-color); | |
background-color: var(--input-color); | |
width: 100%; | |
} | |
/* button */ | |
.button-style { | |
background-color: var(--button-color); | |
color: var(--text-color); | |
} | |
.button-style:hover { | |
background-color: var(--button-hover-color); | |
} | |
/* toggle switch */ | |
.toggle-switch { | |
position: relative; | |
display: inline-block; | |
width: 60px; | |
height: 34px; | |
margin-top: 1em; | |
} | |
.toggle-switch input { | |
opacity: 0; | |
width: 0; | |
height: 0; | |
} | |
.toggle-switch .slider { | |
position: absolute; | |
cursor: pointer; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
height: 34px; | |
background-color: var(--button-color); | |
transition: background-color 0.4s; | |
border-radius: 34px; | |
} | |
.toggle-switch .slider:before { | |
position: absolute; | |
content: ''; | |
height: 26px; | |
width: 26px; | |
left: 4px; | |
bottom: 4px; | |
background-color: var(--text-color); | |
transition: transform 0.4s; | |
border-radius: 50%; | |
} | |
.toggle-switch .slider-content { | |
position: relative; | |
display: flex; | |
height: 26px; | |
width: 26px; | |
top: 4px; | |
align-items: center; | |
justify-content: center; | |
left: 4px; | |
bottom: 4px; | |
transition: transform 0.4s; | |
border-radius: 50%; | |
} | |
.toggle-switch input:checked + .slider:before, | |
.toggle-switch input:checked + .slider .slider-content { | |
transform: translateX(26px); | |
} | |
#sun-icon { | |
color: #e5e7eb; | |
} | |
#moon-icon { | |
color: #374151; | |
} | |
/* modal */ | |
.modal-overlay { | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-color: rgba(0, 0, 0, 0.7); | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.modal-content { | |
background-color: #fff; | |
padding: 20px; | |
border-radius: 8px; | |
max-width: 500px; | |
width: 80%; | |
background-color: var(--background-color); | |
color: var(--text-color); | |
} | |
.modal-header { | |
display: flex; | |
flex-direction: row; | |
justify-content: space-between; | |
align-items: center; | |
} | |
.form-button { | |
background-color: var(--button-color); | |
color: var(--text-color); | |
width: 100%; | |
padding: 8px; | |
} | |
.form-button:hover { | |
background-color: var(--button-hover-color); | |
} | |
.refresh-button { | |
width: 36px; | |
height: 36px; | |
min-width: 36px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
transition: transform 0.4s; | |
border-radius: 50%; | |
} | |
.refresh-button:hover { | |
/* transform: rotate(360deg); */ | |
background-color: var(--button-hover-color); | |
} | |
.content-header { | |
display: flex; | |
flex-direction: row; | |
justify-content: space-between; | |
width: 100%; | |
} | |
.dropdown-input { | |
background-color: var(--input-color); | |
color: var(--text-color); | |
padding-left: 8px; | |
width: 100%; | |
min-width: 200px; | |
height: 32px; | |
} | |
#playground-box { | |
height: calc(100vh - 60px); | |
} | |
#chat-container { | |
display: flex; | |
flex-direction: column; | |
height: calc(100vh - 60px); | |
} | |
#chatbox { | |
flex: 1; | |
overflow: auto; | |
margin: 1em; | |
scrollbar-width: thin; /* For Firefox */ | |
scrollbar-color: var(--scrollbar-color) transparent; /* For Firefox */ | |
background-color: var(--input-color); | |
} | |
#chatbox::-webkit-scrollbar { | |
/* For Chrome, Safari, and Opera */ | |
width: 12px; | |
} | |
#chatbox::-webkit-scrollbar-track { | |
/* For Chrome, Safari, and Opera */ | |
background: transparent; | |
} | |
#chatbox::-webkit-scrollbar-thumb { | |
/* For Chrome, Safari, and Opera */ | |
background: var(--scrollbar-color); | |
border-radius: 50px; | |
} | |
#chatbox:hover::-webkit-scrollbar-thumb { | |
/* For Chrome, Safari, and Opera */ | |
background: var(--scrollbar-color); | |
} | |
#inputbox { | |
height: 80px; | |
margin: 1em; | |
background-color: var(--input-color); | |
display: flex; | |
flex-direction: row; | |
} | |
#message-input { | |
flex: 1; | |
background-color: var(--button-color); | |
color: var(--text-color); | |
} | |
.chat-button:hover { | |
background-color: var(--button-hover-color); | |
} | |
.message { | |
position: relative; | |
background-color: var(--chatbox-color); | |
box-shadow: | |
0 10px 15px -3px rgba(0, 0, 0, 0.1), | |
0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
border-radius: 10px; | |
color: var(--message-text-color); | |
padding: 10px; | |
margin: 10px; | |
z-index: 1; | |
} | |
.message.user { | |
margin-left: auto; | |
margin-right: 40px; | |
} | |
.message.assistant { | |
margin-left: 40px; | |
margin-right: auto; | |
} | |
.home-button { | |
padding: 20px; | |
background-color: var(--button-color); | |
color: var(--text-color); | |
border-radius: 10px; | |
width: 600px; | |
text-align: center; | |
cursor: pointer; | |
transition: background-color 0.3s; | |
} | |
.home-button-small { | |
padding: 20px; | |
background-color: var(--button-color); | |
color: var(--text-color); | |
border-radius: 10px; | |
width: 300px; | |
text-align: center; | |
cursor: pointer; | |
transition: background-color 0.3s; | |
} | |
.home-button-small:hover { | |
background-color: var(--button-hover-color); | |
} | |
.home-button:hover { | |
background-color: var(--button-hover-color); | |
} | |
.home-button-title { | |
font-size: 20px; | |
font-weight: bold; | |
margin-bottom: 10px; | |
} | |
.home-button-description { | |
font-size: 16px; | |
} | |
/* Calculator */ | |
.chart { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
margin-top: 10px; | |
margin-bottom: 10px; | |
border: 1px solid var(--text-color); | |
border-radius: 4px; | |
padding-left: 20px; | |
padding-top: 12px; | |
padding-bottom: 12px; | |
} | |
.chart-row { | |
display: flex; | |
flex-direction: row; | |
align-items: center; | |
} | |
.chart-row-title { | |
width: 100px; | |
} | |
.chart-row-size { | |
width: 100px; | |
} | |
.calculator-input-box { | |
display: flex; | |
flex-direction: row; | |
width: 100%; | |
margin-top: 10px; | |
margin-bottom: 10px; | |
border: 1px solid var(--text-color); | |
border-radius: 4px; | |
padding-block: 12px; | |
} | |
.calculator-box { | |
width: 100%; | |
margin-top: 10px; | |
margin-bottom: 10px; | |
border: 1px solid var(--text-color); | |
border-radius: 4px; | |
padding-block: 12px; | |
} | |
.calculator-input-title { | |
width: 140px; | |
margin-left: 20px; | |
height: 100%; | |
} | |
.calculator-input-tab { | |
padding-bottom: 4px; | |
padding-left: 8px; | |
padding-right: 8px; | |
} | |
.calculator-input-tab-active { | |
padding-bottom: 4px; | |
padding-left: 8px; | |
padding-right: 8px; | |
border-bottom: 2px solid var(--text-color); | |
} | |
.calculator-select { | |
background-color: var(--input-color); | |
color: var(--text-color); | |
display: block; | |
width: 100%; | |
padding-block: 4px; | |
} | |
.calculator-input { | |
background-color: var(--input-color); | |
color: var(--text-color); | |
display: block; | |
width: 100%; | |
padding-block: 4px; | |
} | |
#tooltip { | |
position: absolute; | |
opacity: 0; | |
pointer-events: none; | |
padding: 5px; | |
} | |
#right-container { | |
display: flex; | |
flex-direction: column; | |
height: calc(100vh - 60px); | |
} | |
.table-cell { | |
border: 1px solid var(--text-color); | |
} | |
.chart-side-panel { | |
width: 200px; | |
} | |
.side-panel-input { | |
background-color: var(--input-color); | |
color: var(--text-color); | |
display: block; | |
width: 100%; | |
padding-block: 4px; | |
} | |