Mobie version

This commit is contained in:
Alex
2023-02-06 12:59:50 +00:00
parent 2232bdc091
commit 11c1aaec20
4 changed files with 102 additions and 119 deletions

View File

@@ -525,6 +525,26 @@ video {
bottom: 0px;
}
.right-0 {
right: 0px;
}
.left-0 {
left: 0px;
}
.left-10 {
left: 2.5rem;
}
.right-10 {
right: 2.5rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
@@ -545,26 +565,10 @@ video {
display: flex;
}
.hidden {
display: none;
}
.h-5\/6 {
height: 83.333333%;
}
.h-1\/2 {
height: 50%;
}
.h-full {
height: 100%;
}
.h-screen {
height: 100vh;
}
.max-h-screen {
max-height: 100vh;
}
@@ -573,22 +577,10 @@ video {
min-height: 100vh;
}
.w-3\/4 {
width: 75%;
}
.w-full {
width: 100%;
}
.w-\[46rem\] {
width: 46rem;
}
.w-1\/4 {
width: 25%;
}
.flex-col {
flex-direction: column;
}
@@ -597,6 +589,10 @@ video {
align-items: center;
}
.items-stretch {
align-items: stretch;
}
.justify-between {
justify-content: space-between;
}
@@ -609,6 +605,10 @@ video {
align-self: flex-end;
}
.justify-self-stretch {
justify-self: stretch;
}
.rounded-lg {
border-radius: 0.5rem;
}
@@ -628,21 +628,6 @@ video {
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-yellow-500 {
--tw-bg-opacity: 1;
background-color: rgb(234 179 8 / var(--tw-bg-opacity));
}
.p-2 {
padding: 0.5rem;
}
@@ -671,39 +656,18 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
#chat-container {
height: 44rem;
background-color: white;
padding: 10px;
overflow: auto;
}
@media screen and (max-width: 1024px) {
.text-lg {
font-size: 3.125rem;
margin: 2rem;
line-height: inherit;
}
.bg-gray-200 {
background-color: #edf2f7;
}
.bg-gray-900 {
background-color: #1a202c;
}
.rounded-lg {
border-radius: 0.5rem;
}
.shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.text-gray-700 {
color: #4a5568;
}
.text-sm {
font-size: 0.875rem;
}
.p-4 {
padding: 1.5rem;
.text-sm {
font-size: 2.5rem;
margin: 1.5rem;
line-height: inherit;
}
}
.loader {
@@ -732,4 +696,42 @@ video {
color: rgb(30 64 175 / var(--tw-text-opacity));
}
@media (min-width: 640px) {
@media not all and (min-width: 1024px) {
.sm\:max-lg\:mb-12 {
margin-bottom: 3rem;
}
.sm\:max-lg\:mb-\[12rem\] {
margin-bottom: 12rem;
}
.sm\:max-lg\:hidden {
display: none;
}
.sm\:max-lg\:p-5 {
padding: 1.25rem;
}
}
}
@media (min-width: 1024px) {
.lg\:flex {
display: flex;
}
.lg\:w-3\/4 {
width: 75%;
}
.lg\:w-\[46rem\] {
width: 46rem;
}
.lg\:w-1\/4 {
width: 25%;
}
}

View File

@@ -2,43 +2,23 @@
@tailwind components;
@tailwind utilities;
#chat-container {
height: 44rem;
background-color: white;
padding: 10px;
overflow: auto;
@media screen and (max-width: 1024px) {
.text-lg {
font-size: 3.125rem;
margin: 2rem;
line-height: inherit;
}
.text-sm {
font-size: 2.5rem;
margin: 1.5rem;
line-height: inherit;
}
}
.bg-gray-200 {
background-color: #edf2f7;
}
.bg-gray-900 {
background-color: #1a202c;
}
.rounded-lg {
border-radius: 0.5rem;
}
.shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.text-gray-700 {
color: #4a5568;
}
.text-sm {
font-size: 0.875rem;
}
.p-4 {
padding: 1.5rem;
}
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */