MainPage.scss (4900B)
1 #main-container { 2 display: grid; 3 grid-template-areas: 4 "sidebar header" 5 "sidebar main" 6 "sidebar editor"; 7 grid-template-columns: 40ch auto; 8 grid-template-rows: 60px 2fr auto; 9 grid-auto-flow: column; 10 row-gap: 0.5rem; 11 column-gap: 0.15em; 12 13 #sidebar { 14 grid-area: sidebar; 15 @apply bg-gradient-to-br from-slate-100 via-gray-200 to-orange-200 border-r-[1px] border-slate-300; 16 display: grid; 17 grid-auto-flow: column; 18 grid-template-rows: min-content auto; 19 grid-template-areas: 20 "user-info" 21 "roomlist"; 22 height: 100vh; 23 24 #user-info { 25 @apply p-3 items-center border-b-2; 26 grid-area: user-info; 27 gap: 1rem; 28 display: grid; 29 grid-template-columns: auto 1fr; 30 grid-template-rows: min-content min-content; 31 grid-template-areas: 32 "avatar username" 33 "search search"; 34 align-items: center; 35 justify-self: flex-start; 36 width: 100%; 37 38 #username-container { 39 grid-area: username; 40 display: flex; 41 flex-direction: row; 42 align-items: center; 43 justify-content: space-between; 44 45 span { 46 color: black; 47 font-size: 1rem; 48 font-weight: var(--semibold-font); 49 } 50 } 51 52 #search-container { 53 grid-area: search; 54 display: flex; 55 flex-direction: row; 56 align-items: center; 57 justify-content: space-between; 58 width: 100%; 59 } 60 } 61 } 62 63 .room-wrapper { 64 grid-area: header / header / editor-end / editor-end; 65 } 66 67 #room-info { 68 @apply pb-2 border-b-2 pt-4 pl-2; 69 display: flex; 70 flex-direction: row; 71 align-items: center; 72 justify-content: flex-start; 73 gap: 1rem; 74 grid-area: header; 75 76 @media (prefers-color-scheme: dark) { 77 @apply border-slate-700; 78 } 79 80 #room-name { 81 color: var(--text-color); 82 font-size: var(--font-size-base); 83 font-weight: var(--semibold-font); 84 } 85 } 86 87 #chat-view { 88 grid-area: main; 89 } 90 91 #chat-editor { 92 grid-area: editor; 93 } 94 } 95 96 #modal { 97 display: grid; 98 grid-template-areas: 99 "sidebar main-area x" 100 "sidebar main-area main-area2"; 101 grid-template-columns: 20ch auto 25px; 102 grid-template-rows: 25px auto; 103 gap: 0.75rem; 104 width: 70%; 105 margin: 0 auto; 106 background-color: var(--background-color) !important; 107 108 #modal-sidebar { 109 grid-area: sidebar; 110 display: flex; 111 flex-direction: column; 112 gap: 0.25rem; 113 } 114 115 #modal-content { 116 grid-row-start: main-area; 117 grid-row-end: main-area; 118 grid-column-start: main-area; 119 grid-column-end: main-area2; 120 z-index: 0; 121 122 #profile-view { 123 display: grid; 124 grid-template-areas: 125 "title avatar" 126 "inputs avatar" 127 "inputs other"; 128 gap: 1rem; 129 row-gap: 0.5rem; 130 align-items: flex-start; 131 132 #title { 133 grid-area: title; 134 @apply text-xl font-bold text-black flex items-center; 135 } 136 137 label { 138 @apply flex relative flex-row items-center rounded-lg justify-center; 139 140 input { 141 &::placeholder { 142 @apply text-slate-600; 143 // TODO: This is not aligned and I cant get it working :( 144 } 145 146 &:hover { 147 @apply bg-slate-400/25 outline; 148 } 149 150 @apply py-2 rounded-lg pl-10 outline-slate-700 w-full outline-2 bg-slate-400/50; 151 } 152 } 153 154 #inputs { 155 grid-area: inputs; 156 display: flex; 157 flex-direction: column; 158 gap: 0.25rem; 159 160 #matrixid { 161 input:hover { 162 outline: none; 163 } 164 } 165 } 166 167 #avatar { 168 grid-area: avatar; 169 justify-self: flex-end; 170 align-self: flex-end; 171 margin: 1rem; 172 @apply border-slate-700 rounded-full border-2; 173 } 174 175 176 } 177 } 178 179 #modal-cross { 180 &:hover { 181 @apply bg-slate-300; 182 } 183 184 @apply stroke-slate-600 rounded-full p-1 cursor-pointer; 185 grid-area: x; 186 justify-self: center; 187 align-self: center; 188 z-index: 1; 189 } 190 }