Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
9 ariadna 1 
.block_openai_chat #openai_chat_log {
2 
    display: flex;
3 
    flex-direction: column;
4 
    max-height: 20rem;
5 
    overflow-y: scroll;
6 
    margin-bottom: 0.5rem;
7 
}
8 
 
9 
.block_openai_chat #openai_chat_log p {
10 
    margin: 0;
11 
}
12 
 
13 
.block_openai_chat #openai_chat_log a {
14 
    color: white;
15 
    text-decoration: underline;
16 
}
17 
 
18 
.block_openai_chat #control_bar {
19 
    display: flex;
20 
    gap: 0.5rem;
21 
}
22 
 
23 
.block_openai_chat #control_bar button:hover {
24 
    filter: brightness(0.8);
25 
}
26 
 
27 
.block_openai_chat #control_bar #go {
28 
    border-radius: 0 0.5rem 0.5rem 0;
29 
}
30 
 
31 
.block_openai_chat #control_bar button  {
32 
    transition: filter 0.2s ease;
33 
    border: none;
34 
    border-radius: 0.5rem;
35 
    width: 2.5rem;
36 
}
37 
 
38 
.openai_input_submit_btn {
39 
    background-color: var(--primary);
40 
    color: var(--white);
41 
}
42 
 
43 
.openai_input_refresh_btn {
44 
    background-color: var(--secondary);
45 
    color: black;
46 
}
47 
 
48 
.block_openai_chat .openai_input_popout_btn {
49 
    position: absolute;
50 
    top: 0.75rem;
51 
    right: 0.5rem;
52 
    width: 2rem;
53 
    height: 2rem;
54 
    border-radius: 99rem;
55 
    padding: 0.4rem;
56 
    display: flex;
57 
    border: none;
58 
    z-index: 2;
59 
}
60 
 
61 
.openai_input_submit_btn_icon,
62 
.openai_input_refresh_btn_icon {
63 
    width: 80%;
64 
}
65 
 
66 
.openai_input_bar {
67 
    display: flex;
68 
    width: 100%;
69 
}
70 
 
71 
.block_openai_chat img {
72 
    transform: scale(0.7);
73 
}
74 
 
75 
.block_openai_chat #openai_input,
76 
.openai_input_bar input {
77 
    padding: 0.5rem;
78 
    border-radius: 0.5rem 0 0 0.5rem;
79 
    border: 1px solid gray;
80 
    width: 100%;
81 
    transition: background 0.4s ease;
82 
}
83 
 
84 
.block_openai_chat #openai_input.error {
85 
    border: 1px solid red;
86 
}
87 
 
88 
.block_openai_chat .openai_message {
89 
    padding: 0.75rem 1rem;
90 
    background: #f4f4f4;
91 
    border-radius: 0.5rem;
92 
    margin-bottom: 1.75rem;
93 
    width: fit-content;
94 
    max-width: 90%;
95 
    animation: block_openai_chat_popup 0.4s cubic-bezier(0.87, 0, 0.13, 1);
96 
    position: relative;
97 
}
98 
 
99 
.block_openai_chat .openai_message:before {
100 
    position: absolute;
101 
    top: -1.5rem;
102 
    left: 0;
103 
    color: gray;
104 
    opacity: 0;
105 
    animation: block_openai_chat_fade-in 0.4s ease 0.4s forwards;
106 
}
107 
 
108 
.block_openai_chat .openai_message.user {
109 
    align-self: flex-end;
110 
    text-align: right;
111 
}
112 
 
113 
.block_openai_chat .openai_message.user:before {
114 
    right: 0;
115 
    left: unset;
116 
}
117 
 
118 
.block_openai_chat .openai_message.bot {
119 
    background: var(--blue);
120 
    color: var(--white);
121 
}
122 
 
123 
.block_openai_chat .openai_message.loading {
124 
    animation: block_openai_chat_thinking 1s ease infinite;
125 
}
126 
 
127 
.block_openai_chat .openai_message.loading:before {
128 
    animation: none;
129 
    opacity: 0;
130 
}
131 
 
132 
.block_openai_chat.disabled,
133 
.block_openai_chat .disabled {
134 
    opacity: 0.25;
135 
    pointer-events: none;
136 
}
137 
 
138 
.block_openai_chat.expanded {
139 
    position: fixed;
140 
    height: 70vh;
141 
    width: 30rem;
142 
    left: 50%;
143 
    top: 50%;
144 
    transform: translate(-50%, -50%);
145 
    outline: 100vw solid #00000029;
146 
    z-index: 2;
147 
}
148 
 
149 
.block_openai_chat.expanded .card-body {
150 
    overflow-y: auto;
151 
}
152 
 
153 
.block_openai_chat.expanded #openai_chat_log {
154 
    max-height: unset;
155 
    overflow-y: unset;
156 
    padding-bottom: 3rem !important;
157 
    padding-top: 1rem;
158 
}
159 
 
160 
.block_openai_chat.expanded #control_bar {
161 
    display: flex;
162 
    gap: .5rem;
163 
    position: fixed;
164 
    bottom: 1rem;
165 
    width: calc(100% - 2rem);
166 
}
167 
 
168 
.block_openai_chat.expanded .openai_message {
169 
    width: fit-content !important;
170 
}
171 
 
172 
.block_openai_chat .recording {
173 
    width: 0.5rem;
174 
    height: 0.5rem;
175 
    background: #ff0000;
176 
    position: absolute;
177 
    top: 1.5rem;
178 
    right: 3rem;
179 
    border-radius: 99rem;
180 
    filter: opacity(0.5);
181 
    animation: block_openai_chat_thinking 3s linear infinite;
182 
}
183 
 
184 
.block_openai_chat input {
185 
    padding: 0.5rem;
186 
    border-radius: 0.5rem;
187 
    border: 1px solid grey;
188 
}
189 
 
190 
.block_openai_chat .report_container {
191 
    display: flex;
192 
    gap: 1rem;
193 
    margin-bottom: 1rem;
194 
}
195 
 
196 
@media screen and (max-width: 750px) {
197 
    .drawerheader {
198 
        pointer-events: none;
199 
    }
200 
    .drawerheader button {
201 
        pointer-events: all;
202 
    }
203 
    .block_openai_chat.expanded {
204 
        transform: unset;
205 
        top: 0;
206 
        left: 0;
207 
        width: 100vw;
208 
        height: 100vh;
209 
    }
210 
    .block_openai_chat.expanded .openai_input_popout_btn {
211 
        right: 3rem;
212 
    }
213 
    .block_openai_chat.expanded .recording {
214 
        right: 5.5rem;
215 
    }
216 
    .block_openai_chat .report_container {
217 
        flex-direction: column;
218 
    }
219 
}
220 
 
221 
@keyframes block_openai_chat_popup {
222 
    0% {
223 
        opacity: 0;
224 
        transform: translateY(5px);
225 
    }
226 
 
227 
    70% {
228 
        opacity: 1;
229 
        transform: translateY(-2.5px);
230 
    }
231 
 
232 
    85% {
233 
        transform: translateY(2.5px);
234 
    }
235 
 
236 
    100% {
237 
        transform: translateY(0);
238 
    }
239 
}
240 
 
241 
@keyframes block_openai_chat_thinking {
242 
    0% {
243 
        opacity: 1;
244 
    }
245 
 
246 
    50% {
247 
        opacity: 0.25;
248 
    }
249 
 
250 
    100% {
251 
        opacity: 1;
252 
    }
253 
}
254 
 
255 
@keyframes block_openai_chat_fade-in {
256 
    from {
257 
        opacity: 0;
258 
    }
259 
 
260 
    to {
261 
        opacity: 1;
262 
    }
263 
}