main #71
					 12 changed files with 48 additions and 48 deletions
				
			
		|  | @ -2,8 +2,8 @@ | |||
| .container{ | ||||
|     display: flex; | ||||
|     width: 100vw; | ||||
|     height: 100vh; | ||||
|     padding-top: 12vh; | ||||
|     height: 90dvh; | ||||
|     padding-top: 1dvh; | ||||
| } | ||||
| 
 | ||||
| .left-panel { | ||||
|  | @ -13,13 +13,13 @@ | |||
|     border-radius: 0 1em 0 0; | ||||
|     margin-left: 0; | ||||
|     padding-right: 1em; | ||||
|     height: 100%; | ||||
| } | ||||
| 
 | ||||
| .left-panel.hidden { | ||||
|     opacity: 0; /* Fade out when hidden */ | ||||
|     width: 0; /* Collapse width to 0 */ | ||||
|     visibility: hidden; /* Hide visibility while collapsing */ | ||||
|      | ||||
| } | ||||
| 
 | ||||
| .conversation-container { | ||||
|  | @ -27,15 +27,10 @@ | |||
|     transition: margin-left 0.3s ease; /* Smooth margin adjustment */ | ||||
|     background-color: var(--conversation-background-color); /* Use variable for background color */ | ||||
|     border-radius: 1em 0 0 0; | ||||
|     height: 100%; | ||||
| } | ||||
| 
 | ||||
| /* Adjust margin-left when panel is shown or hidden */ | ||||
| .conversation-container.expanded { | ||||
|     margin-left: 1vw; | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| .conversation-container.collapsed { | ||||
|     margin-left: 1vw; /* Space for the left panel */ | ||||
|     bottom: 0; | ||||
| } | ||||
|  |  | |||
|  | @ -5,8 +5,8 @@ | |||
|    | ||||
|   .credits-section { | ||||
|     max-width: 900px; | ||||
|     height: 80vh; | ||||
|     margin: 0 auto; | ||||
|     height: 80dvh; | ||||
|     margin: auto; | ||||
|     background: var(--doc-background-color); /* Use variable for background */ | ||||
|     padding: 2rem; | ||||
|     border-radius: 8px; | ||||
|  | @ -15,20 +15,20 @@ | |||
|   } | ||||
|    | ||||
|   .title { | ||||
|     font-size: 2rem; | ||||
|     font-size: calc(var(--font-size)*2); | ||||
|     color: var(--doc-title-color); /* Use variable for title color */ | ||||
|     margin-bottom: 1.5rem; | ||||
|   } | ||||
|    | ||||
|   .subtitle { | ||||
|     font-size: 1.5rem; | ||||
|     font-size: calc(var(--font-size)*1.5); | ||||
|     color: var(--doc-subtitle-color); /* Use variable for subtitle color */ | ||||
|     margin-top: 2rem; | ||||
|     margin-bottom: 1rem; | ||||
|   } | ||||
|    | ||||
|   .paragraph { | ||||
|     font-size: 1rem; | ||||
|     font-size: calc(var(--font-size)); | ||||
|     color: var(--doc-paragraph-color); /* Use variable for paragraph color */ | ||||
|     margin-bottom: 1.5rem; | ||||
|     line-height: 1.6; | ||||
|  |  | |||
|  | @ -7,8 +7,8 @@ | |||
| 
 | ||||
| .documentation-section { | ||||
|   max-width: 900px; | ||||
|   height: 80vh; | ||||
|   margin: 0 auto; | ||||
|   height: 80dvh; | ||||
|   margin: auto; | ||||
|   background: var(--doc-background-color); /* Use variable for background */ | ||||
|   padding: 2rem; | ||||
|   border-radius: 8px; | ||||
|  | @ -17,27 +17,27 @@ | |||
| } | ||||
| 
 | ||||
| .title { | ||||
|   font-size: 2rem; | ||||
|   font-size: calc(var(--font-size)*2); | ||||
|   color: var(--doc-title-color); /* Use variable for title color */ | ||||
|   margin-bottom: 1.5rem; | ||||
| } | ||||
| 
 | ||||
| .subtitle { | ||||
|   font-size: 1.5rem; | ||||
|   font-size: calc(var(--font-size)*1.5); | ||||
|   color: var(--doc-subtitle-color); /* Use variable for subtitle color */ | ||||
|   margin-top: 2rem; | ||||
|   margin-bottom: 1rem; | ||||
| } | ||||
| 
 | ||||
| .subsection-title { | ||||
|   font-size: 1.25rem; | ||||
|   font-size: calc(var(--font-size)*1.25); | ||||
|   color: var(--doc-subsection-title-color); /* Use variable for subsection title color */ | ||||
|   margin-top: 1.5rem; | ||||
|   margin-bottom: 0.75rem; | ||||
| } | ||||
| 
 | ||||
| .paragraph { | ||||
|   font-size: 1rem; | ||||
|   font-size: calc(var(--font-size)); | ||||
|   color: var(--doc-paragraph-color); /* Use variable for paragraph color */ | ||||
|   margin-bottom: 1.5rem; | ||||
|   line-height: 1.6; | ||||
|  |  | |||
|  | @ -1,14 +1,10 @@ | |||
| html, | ||||
| body { | ||||
|     height: 100vh; | ||||
|     height: 100dvh; | ||||
|     overflow: hidden; | ||||
|     position: relative; | ||||
| } | ||||
| 
 | ||||
| body { | ||||
|     display: flex; | ||||
|     justify-content: center; | ||||
|     align-items: center; | ||||
|     background-color: var(--background-color); | ||||
|     color: var(--text-color); | ||||
|     font-family: var(--font-family); | ||||
|  | @ -19,11 +15,6 @@ body { | |||
| header { | ||||
|     background-color: var(--header-background-color); | ||||
|     color: var(--header-text-color); | ||||
|     padding: 1rem; /* Adjust padding as needed */ | ||||
| } | ||||
| 
 | ||||
| main{ | ||||
|     height: 100%; | ||||
| } | ||||
| 
 | ||||
| button { | ||||
|  |  | |||
|  | @ -1,10 +1,8 @@ | |||
| header{ | ||||
|     position: absolute; | ||||
|     position: relative; | ||||
|     padding: 0 20px; | ||||
|     top: 0; | ||||
|     left: 0; | ||||
|     width: 100%; | ||||
|     height: 10vh; | ||||
|     height: 10dvh; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     justify-content: center; | ||||
|  |  | |||
|  | @ -1,7 +1,7 @@ | |||
| .history-background { | ||||
|     grid-column: 1/2; | ||||
|     grid-row: 1/2; | ||||
|     height: 45%; | ||||
|     height: 40dvh; | ||||
|     overflow: hidden; | ||||
|     background-color: var(--history-background-color); | ||||
|     padding: 1em; | ||||
|  | @ -39,5 +39,7 @@ | |||
| } | ||||
| 
 | ||||
| .history-models{ | ||||
|     height: 100%; | ||||
|     position: relative; | ||||
|     height: 90dvh; | ||||
|     /* padding-bottom: 3dvh; */ | ||||
| } | ||||
|  |  | |||
|  | @ -1,7 +1,5 @@ | |||
| /* Input Section */ | ||||
| .input { | ||||
|     grid-column: 2/3; | ||||
|     grid-row: 4/5; | ||||
|     border-radius: 8px; | ||||
|     background-color: var(--input-background-color); | ||||
|     padding: 1em; | ||||
|  | @ -13,7 +11,12 @@ | |||
|     justify-content: space-between; | ||||
|     align-items: center; | ||||
|     height: auto; | ||||
|     height: 10vh; | ||||
|     height: 10dvh; | ||||
|     position: absolute; | ||||
|     left: 0.25vw; | ||||
|     bottom: 3dvh; | ||||
|     right: 0.25vw; | ||||
|     box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5); | ||||
| } | ||||
| 
 | ||||
| .input input { | ||||
|  | @ -44,8 +47,8 @@ | |||
|     border-radius: 8px; | ||||
|     font-size: 1.5em; | ||||
|     cursor: pointer; | ||||
|     height: 50px; | ||||
|     width: 75px; | ||||
|     height: 8dvh; | ||||
|     width: 8vw; | ||||
|     display: flex; | ||||
|     justify-content: center; | ||||
|     align-items: center; | ||||
|  |  | |||
|  | @ -1,13 +1,18 @@ | |||
| .model-background { | ||||
|     position: absolute; | ||||
|     left: 1em; | ||||
|     bottom: 4dvh; | ||||
|     right: 0; | ||||
|     grid-column: 1/2; | ||||
|     grid-row: 1/2; | ||||
|     height: 45%; | ||||
|     padding-bottom: 1px; | ||||
|     overflow: scroll; | ||||
|     overflow: hidden; | ||||
|     background-color: var(--history-background-color); | ||||
|     padding: 1em; | ||||
|     margin: 0 1em; | ||||
|     margin-right: 0; | ||||
|     border-radius: 1em; | ||||
|     height: 45dvh; | ||||
| } | ||||
| 
 | ||||
| .models { | ||||
|  | @ -69,6 +74,7 @@ | |||
|     transition: opacity 0.5s ease; | ||||
|     pointer-events: none; | ||||
|     opacity: 0; | ||||
|     border-radius: 5%; | ||||
| } | ||||
| 
 | ||||
| .overlay img { | ||||
|  |  | |||
|  | @ -4,13 +4,14 @@ | |||
|     grid-row: 1 / 4; | ||||
|     background-color: var(--output-background-color); | ||||
|     margin: 1em; | ||||
|     padding-bottom: 14dvh; | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     justify-content: flex-start; | ||||
|     font-size: 1em; | ||||
|     overflow-y: auto; | ||||
|     width: calc(100% - 2em); /* Corrected calculation for width */ | ||||
|     height: 70vh; | ||||
|     height: 90dvh; | ||||
| } | ||||
| 
 | ||||
| #conversation { | ||||
|  |  | |||
|  | @ -2,4 +2,6 @@ | |||
|     margin: 0; | ||||
|     padding: 0; | ||||
|     box-sizing: border-box; | ||||
|     scroll-behavior: smooth; | ||||
|     transition: all 0.2s ease-in-out; | ||||
| } | ||||
|  |  | |||
|  | @ -8,7 +8,6 @@ | |||
|    | ||||
|   /* Header styles */ | ||||
|   header { | ||||
|     position: fixed; | ||||
|     top: 0; | ||||
|     left: 0; | ||||
|     margin-top: 0px; | ||||
|  | @ -20,11 +19,10 @@ | |||
|   .container { | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     align-items: center; | ||||
|     width: 100vw; | ||||
|     overflow: scroll; | ||||
|     overflow: hidden; | ||||
|     margin: 0; | ||||
|     padding: 7em 0 0 0 ; | ||||
|     padding: 1dvh 0 0 0 ; | ||||
|   } | ||||
| 
 | ||||
|   /* Left panel styles */ | ||||
|  | @ -58,6 +56,7 @@ | |||
|     min-width: 100%; | ||||
|     margin-left: 0; | ||||
|     border-radius: none; | ||||
|     height: 10vh; | ||||
|   } | ||||
| 
 | ||||
|   /* Grid styles */ | ||||
|  | @ -79,6 +78,7 @@ | |||
|     margin: 0 auto; | ||||
|     align-items: center; | ||||
|     width: 90%; | ||||
|     bottom: 10dvh | ||||
|   } | ||||
| 
 | ||||
|   .input input { | ||||
|  |  | |||
|  | @ -16,6 +16,7 @@ | |||
|     border-bottom-right-radius: 0; | ||||
|     margin-left: auto; | ||||
|     text-align: left; | ||||
|     margin-right: 1.5vw; | ||||
| } | ||||
| 
 | ||||
| .ai-message { | ||||
|  | @ -27,6 +28,7 @@ | |||
| } | ||||
| 
 | ||||
| .ai-container{ | ||||
|     position: relative; | ||||
|     height: min-content; | ||||
|     bottom: 0; | ||||
|     width: 100%; | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue